Table des matières

Ajout de fichiers scripts

Avant tout, le projet (et donc le fichier Gruntfile.js, prend en compte une structure telle que :

Donc les fichiers de style sont dans public/css et la majorité des fichiers de script JavaScript sont dans public/app (qui est une application AngularJS).

Étapes

  1. Installer Grunt : $ sudo npm install -g grunt
  2. Installer Watch : $ sudo npm install grunt-contrib-watch --save-dev
  3. Installer Include-Source : $ sudo npm install grunt-include-source --save-dev
  4. Créer le fichier Gruntfile.js : 
    module.exports = function(grunt) {
 
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
 
        watch: {
            scripts: {
                files: ['public/app/**/*.js'],
                tasks: ['includeSource'],
                options: {
                    spawn: false,
                    event: ['added', 'deleted']
                }
            }
        },
        includeSource: {
            options: {
                basePath: 'public',
                baseUrl: '/',
                templates: {
                    html: {
                        js: '<script type="text/javascript" src="{filePath}"></script>',
                        css: '<link rel="stylesheet" type="text/css" href="{filePath}" />',
                    }
                }
            },
            target: {
                files: {
                    'server/views/index.html': 'server/views/index.tpl.html'
                }
            }
        },
 
    });
 
    grunt.event.on('watch', function(action, filepath, target) {
        grunt.log.writeln(target + ': ' + filepath + ' has ' + action);
    });
 
    // Load tasks
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-include-source');
 
    // Default task(s).
    grunt.registerTask('default', [
        'watch',
        'includeSource'
    ]);
 
};
  5. Créer un fichier index.tpl.html qui inclut :
    1. <!-- include: "type": "css", "files": "css/**/*.css" --> dans la section <head>.
    2. <!-- include: "type": "js", "files": "app/**/*.js" --> avant la balise de fermeture du corps du HTML (avant </body>).
  6. Exécuter Grunt : $ grunt.

Si tout se passe bien, le fichier index.html sera mis à jour à l'ajout/suppression d'un fichier JavaScript/CSS.

Sources