Grunt - Exemple de fichier

Dans ce chapitre, créons un simple fichier Grunt en utilisant les plugins suivants -

• grunt-contrib-uglify
• grunt-contrib-concat
• grunt-contrib-jshint
• grunt-contrib-watch

Installez tous les plugins ci-dessus et suivez les étapes ci-dessous pour créer un simple Gruntfile.js -

Step 1- Vous devez créer une fonction wrapper , qui encapsule les configurations de votre Grunt.

module.exports = function(grunt) {};

Step 2 - Initialisez votre objet de configuration comme indiqué ci-dessous -

grunt.initConfig({});

Step 3- Ensuite, lisez les paramètres du projet du fichier package.json dans la propriété pkg . Cela nous permet de faire référence aux valeurs des propriétés dans votre fichier package.json .

pkg: grunt.file.readJSON('package.json')

Step 4- Ensuite, vous pouvez définir des configurations pour les tâches. Créons notre première tâche concat pour concaténer tous les fichiers présents dans le dossier src / et stocker le fichier .js concaténé sous le dossier dist / .

concat: {
   options: {
      // define a string to insert between files in the concatenated output
      separator: ';'
   },
   dist: {
      // files needs to be concatenated
      src: ['src/**/*.js'],
      // location of the concatenated output JS file
      dest: 'dist/<%= pkg.name %>.js'
   }
}

Step 5- Maintenant, créons une autre tâche appelée uglify pour minimiser notre JavaScript.

uglify: {
   options: {
      // banner will be inserted at the top of the output which displays the date and time
      banner: '/*! <%= pkg.name %> <%= grunt.template.today() %> */\n'
   },
   dist: {
      files: {
         'dist/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>']
      }
   }
}

La tâche ci-dessus crée un fichier dans le dossier dist / qui contient les fichiers .js minifiés. le<%= concat.dist.dest %>demandera à uglify de réduire le fichier généré par la tâche concat.

Step 6- Configurons le plugin JSHint en créant une tâche jshint .

jshint: {
   // define the files to lint
   files: ['Gruntfile.js', 'src/**/*.js'],
   // configure JSHint
   options: {
      // more options here if you want to override JSHint defaults
      globals: {
         jQuery: true,
      }
   }
}

La tâche jshint ci-dessus accepte un tableau de fichiers puis un objet d'options. La tâche ci-dessus recherchera toute violation de codage dans les fichiers Gruntfile.js et src / ** / *. Js .

Step 7- Ensuite, nous avons la tâche de surveillance qui recherche les modifications dans l'un des fichiers spécifiés et exécute les tâches que vous spécifiez.

watch: {
   files: ['<%= jshint.files %>'],
   tasks: ['jshint']
}

Step 8- Ensuite, nous devons charger les plugins Grunt qui ont tous été installés via _npm .

grunt.loadNpmTasks('grunt-contrib-uglify');

grunt.loadNpmTasks('grunt-contrib-jshint');

grunt.loadNpmTasks('grunt-contrib-watch');

grunt.loadNpmTasks('grunt-contrib-concat');

Step 9- Enfin, nous devons définir la tâche par défaut .

grunt.registerTask('default', ['jshint', 'concat', 'uglify']);

La tâche par défaut peut être exécutée en tapant simplement la commande grunt sur la ligne de commande.

Voici votre Gruntfile.js complet -

module.exports = function(grunt) {

   grunt.initConfig({
      pkg: grunt.file.readJSON('package.json'),
      concat: {
         options: {
            separator: ';'
         },
         dist: {
            src: ['src/**/*.js'],
            dest: 'dist/<%= pkg.name %>.js'
         }
      },
      uglify: {
         options: {
            banner: '/*! <%= pkg.name %> <%= grunt.template.today() %> */\n'
         },
         dist: {
            files: {
               'dist/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>']
            }
         }
      },
      jshint: {
         // define the files to lint
         files: ['Gruntfile.js', 'src/**/*.js'],
         // configure JSHint
         options: {
            // more options here if you want to override JSHint defaults
            globals: {
               jQuery: true,
            }
         }
      },
      watch: {
         files: ['<%= jshint.files %>'],
         tasks: ['jshint']
      }
   });

   grunt.loadNpmTasks('grunt-contrib-uglify');
   grunt.loadNpmTasks('grunt-contrib-jshint');
   grunt.loadNpmTasks('grunt-contrib-watch');
   grunt.loadNpmTasks('grunt-contrib-concat');

   grunt.registerTask('default', ['jshint', 'concat', 'uglify']);

};