Premiers pas avec Grunt (exécuteur de tâches automatique)_compétences javascript

Au cours du processus de développement de Javascript, vous rencontrez souvent des tâches répétitives, telles que la fusion de fichiers, la compression de code, la vérification des erreurs grammaticales, la conversion du code Sass en code CSS, etc. Habituellement, nous devons utiliser différents outils pour effectuer différentes tâches, ce qui est un travail répétitif et qui prend beaucoup de temps. Grunt est un outil inventé pour résoudre ce problème, qui peut nous aider à gérer et exécuter automatiquement diverses tâches.

Pour faire simple, Grunt est un exécuteur de tâches automatique qui exécute automatiquement une série de tâches dans un ordre prédéfini. Cela rationalise le flux de travail et réduit le fardeau des tâches répétitives.

## Installer

Grunt est basé sur Node.js. Avant l'installation, vous devez d'abord installer Node.js, puis exécuter la commande suivante.

sudo npm install grunt-cli -g

grunt-cli indique que l'interface de ligne de commande grunt est installée et le paramètre g indique une installation globale.

Grunt utilise une structure de modules En plus d'installer l'interface de ligne de commande, vous devez également installer les modules correspondants selon vos besoins. Ces modules doivent être installés localement, car différents projets peuvent nécessiter différentes versions du même module.

Tout d'abord, créez un fichier texte package.json dans le répertoire racine du projet pour spécifier les modules requis par le projet en cours. Voici un exemple.

{ “name”: “my-project-name”, “version”: “0.1.0”, “author”: “Your Name”, “devDependencies”: { “grunt”: “0.x.x”, “grunt-contrib-jshint”: “<em>“, “grunt-contrib-concat”: “~0.1.1”, “grunt-contrib-uglify”: “~0.1.0”, “grunt-contrib-watch”: “~0.1.4” } }</em>

Dans le fichier package.json ci-dessus, en plus d'indiquer le nom et la version du projet, le module grunt et la version dont dépend le projet sont également spécifiés dans l'attribut devDependencies : le module principal grunt est la dernière version 0.x.x, et le plug-in jshint est la dernière version. Le plug-in concat n'est pas inférieur à la version 0.1.1, le plug-in uglify n'est pas inférieur à la version 0.1.0 et le plug-in watch n'est pas inférieur à la version 0.1. .4.

Ensuite, exécutez la commande suivante dans le répertoire racine du projet et ces plug-ins seront automatiquement installés dans le sous-répertoire node_modules.

npm install

La méthode ci-dessus concerne la situation où package.json existe déjà. Si vous souhaitez générer automatiquement le fichier package.json, vous pouvez utiliser la commande npm init et suivre les invites à l'écran pour répondre au nom et à la version du module requis.

npm init

Si le fichier package.json existant n'inclut pas le module Grunt, vous pouvez ajouter le paramètre --save-dev lors de l'installation directe du module Grunt, et le module sera automatiquement ajouté au fichier package.json.

npm install <module> —save-dev

Par exemple, correspondant au module spécifié dans le fichier package.json ci-dessus, vous devez exécuter la commande npm suivante.

npm install grunt —save-dev npm install grunt-contrib-jshint —save-dev npm install grunt-contrib-concat —save-dev npm install grunt-contrib-uglify —save-dev npm install grunt-contrib-watch —save-dev

## Fichier de script de commande Gruntfile.js

Une fois le module installé, l'étape suivante consiste à créer un nouveau fichier de script Gruntfile.js dans le répertoire racine du projet. Il s'agit d'un fichier de configuration pour Grunt, tout comme package.json est un fichier de configuration pour NPM. Gruntfile.js est la façon dont un module Node.js général est écrit.

module.exports = function(grunt) { // 配置Grunt各种模块的参数 grunt.initConfig({ jshint: { / jshint的参数 <em>/ }, concat: { /</em> concat的参数 <em>/ }, uglify: { /</em> uglify的参数 <em>/ }, watch: { /</em> watch的参数 <em>/ } }); // 从node_modules目录加载模块文件 grunt.loadNpmTasks(‘grunt-contrib-jshint'); grunt.loadNpmTasks(‘grunt-contrib-concat'); grunt.loadNpmTasks(‘grunt-contrib-uglify'); grunt.loadNpmTasks(‘grunt-contrib-watch'); // 每行registerTask定义一个任务 grunt.registerTask(‘default', [‘jshint', ‘concat', ‘uglify']); grunt.registerTask(‘check', [‘jshint']); };</em>

Le code ci-dessus utilise trois méthodes de code grunt : grunt.initConfig : définit les paramètres des différents modules, et chaque élément membre correspond à un module du même nom.
grunt.loadNpmTasks : Chargez les modules requis pour terminer la tâche. grunt.registerTask : Définissez des tâches spécifiques. Le premier paramètre est le nom de la tâche et le deuxième paramètre est un tableau indiquant les modules que la tâche doit utiliser en séquence. Le nom de la tâche par défaut indique le module à appeler (jshint, concat et uglify dans cet exemple) si la commande grunt est entrée directement sans aucun paramètre ; la tâche de vérification dans cet exemple indique l'utilisation du plug-in jshint pour effectuer une vérification de syntaxe sur le module. code.
Le code ci-dessus charge un total de quatre modules : jshint (vérification des erreurs de syntaxe), concat (fusion de fichiers), uglify (compression du code) et watch (exécution automatique). Ensuite, il existe deux manières de l’utiliser.

(1) Exécutez un certain module à partir de la ligne de commande, tel que

grunt jshint

Le code ci-dessus indique l'exécution du module jshint.

(2) La ligne de commande effectue une certaine tâche. Par exemple

grunt check

Le code ci-dessus indique l'exécution de la tâche de vérification. Si l'opération réussit, "Terminé, sans erreur" s'affichera.

Si aucun nom de tâche n'est donné, il suffit de taper grunt pour exécuter la tâche par défaut.

## Exemple Gruntfile.js : module grunt-contrib-cssmin

Ce qui suit utilise le module cssmin pour montrer comment écrire le fichier Gruntfile.js. Le module cssmin est utilisé pour minimiser les fichiers CSS.

Tout d’abord, installez le module dans le répertoire racine de votre projet.

npm install grunt-contrib-cssmin —save-dev

Ensuite, créez un nouveau fichier Gruntfile.js.

module.exports = function(grunt) { grunt.initConfig({ cssmin: { minify: { expand: true, cwd: ‘css/‘, src: [‘<em>.css', ‘!</em>.min.css'], dest: ‘css/‘, ext: ‘.min.css' }, combine: { files: { ‘css/out.min.css': [‘css/part1.min.css', ‘css/part2.min.css'] } } } }); grunt.loadNpmTasks(‘grunt-contrib-cssmin'); grunt.registerTask(‘default', [‘cssmin:minify','cssmin:combine']); };

Les trois méthodes du code ci-dessus sont expliquées en détail ci-dessous et nous les examinerons une par une.

(1)grunt.initConfig

La méthode grunt.initConfig est utilisée pour la configuration du module et accepte un objet comme paramètre. Les membres de cet objet correspondent aux modules du même nom utilisés. Puisque nous configurons le module cssmin, il contient un membre (propriété) cssmin.

cssmin (propriété) pointe vers un objet qui contient plusieurs membres. En plus de certains membres définis par le système (tels que les options), d'autres membres personnalisés sont appelés cibles. Un module peut avoir plusieurs cibles. Dans le code ci-dessus, le module cssmin a deux cibles. L'une est "minify", qui est utilisée pour compresser les fichiers CSS ; l'autre est "combine", qui est utilisée pour fusionner plusieurs fichiers CSS en un seul. . document.

Pour les paramètres spécifiques à chaque cible, vous devez vous référer à la documentation du modèle. En ce qui concerne cssmin, la signification spécifique des paramètres de la cible minify est la suivante :

expand : Si défini sur true, cela signifie que l'espace réservé du nom de fichier suivant (c'est-à-dire le numéro ) doit être développé en un nom de fichier spécifique.
cwd : Le répertoire où se trouve le fichier (entrée) à traiter. src : Indique le fichier qui doit être traité. S'il est sous forme de tableau, chaque élément du tableau est un nom de fichier et des caractères génériques peuvent être utilisés.
dest : Indique le nom du fichier ou du répertoire traité. ext : représente le nom du suffixe du fichier traité.
En plus des paramètres ci-dessus, certains paramètres sont communs à tous les modules Grunt.

filtre : une fonction qui renvoie une valeur booléenne pour filtrer les noms de fichiers. Seuls les fichiers avec une valeur de retour true seront traités par Grunt. point : Indique s'il faut faire correspondre les fichiers système commençant par un point (.).
makeBase : Si défini sur true, seule la dernière partie du chemin du fichier sera mise en correspondance. Par exemple, a?b peut correspondre à /xyz/123/acb mais pas à /xyz/acb/123.
Concernant les caractères génériques, les significations sont les suivantes :  : correspond à n'importe quel nombre de caractères, à l'exclusion de /. ? : correspond à un seul caractère, à l'exclusion du /.
** : correspond à n'importe quel nombre de caractères, y compris /. {} : Une liste séparée par des virgules est autorisée, indiquant une relation "ou" (ou).
! : utilisé au début du motif, indiquant que seuls les cas non correspondants seront renvoyés.
Par exemple, foo/.js correspond aux fichiers du répertoire foo dont les noms se terminent par .js, et foo//.js correspond aux fichiers du répertoire foo et à tous ses sous-répertoires dont les noms se terminent par . js. Le fichier se terminant par !.css signifie faire correspondre tous les fichiers avec un suffixe autre que ".css".

Autres exemples d'utilisation de caractères génériques pour définir les attributs src :
(2)grunt.loadNpmTasks

La méthode grunt.loadNpmTasks charge les fichiers du module. (3)grunt.registerTask

La méthode grunt.registerTask définit comment appeler une tâche spécifique. La tâche « par défaut » signifie que si aucun paramètre n'est fourni et que la commande grunt est entrée directement, « cssmin:minify » sera exécuté en premier, puis « cssmin:combine » sera exécuté, c'est-à-dire que la compression sera effectuée en premier et puis fusionné. Si vous effectuez uniquement une compression ou une fusion, vous devez spécifier "nom du module : nom de la cible" après la commande grunt.
grunt-contrib-clean : Supprimer des fichiers.
* grunt-contrib-compass : utilisez Compass pour compiler des fichiers Sass.
* grunt-contrib-concat : Consolider les fichiers.
* grunt-contrib-copy : Copier les fichiers.
* grunt-contrib-cssmin : Compressez et fusionnez les fichiers CSS.
* grunt-contrib-imagemin : Module de compression d'images.
* grunt-contrib-jshint : Vérifiez la syntaxe JavaScript.
* grunt-contrib-uglify : Compressez et fusionnez les fichiers JavaScript.
* grunt-contrib-watch : surveillez les modifications apportées aux fichiers et prenez les mesures correspondantes.
Si le préfixe du module est grunt-contrib, cela signifie que le module est maintenu par l'équipe de développement de grunt ; si le préfixe est grunt (comme grunt-pakmanager), cela signifie qu'il est maintenu par un tiers. promoteur.

Sélectionnez quelques modules ci-dessous pour voir comment leurs paramètres de configuration sont écrits, c'est-à-dire comment configurer chaque module dans la méthode grunt.initConfig.

### grognement-contrib-jshint

jshint est utilisé pour vérifier les erreurs de syntaxe, par exemple si l'utilisation des points-virgules est correcte, si vous avez oublié d'écrire des parenthèses, etc. Son code de configuration dans la méthode grunt.initConfig est le suivant.
/.js'] },

Le code ci-dessus spécifie d'abord l'élément de vérification de jshint. eqeqeq signifie que l'opérateur d'égalité doit être remplacé par un opérateur d'égalité stricte, et la fin signifie qu'il ne doit pas y avoir d'espaces supplémentaires à la fin de la ligne. Ensuite, spécifiez l'attribut files, indiquant que la cible de vérification est le fichier Gruntfile.js et les fichiers JavaScript dans tous les sous-répertoires du répertoire lib.

### grognement-contrib-concat

concat est utilisé pour fusionner des fichiers similaires. Il peut non seulement fusionner des fichiers JavaScript, mais également des fichiers CSS.
.js', dest : 'js/' } },

上面代码中的options属性指定压缩后文件的文件头，以及sourceMap设置；target目标指定输入和输出文件。

### grunt-contrib-copy

copy模块用于复制文件与目录。

copy: { main: { src: ‘src/<em>‘, dest: ‘dest/‘, }, },</em>

上面代码将src子目录（只包含它下面的第一层文件和子目录），拷贝到dest子目录下面（即dest/src目录）。如果要更准确控制拷贝行为，比如只拷贝文件、不拷贝目录、不保持目录结构，可以写成下面这样：

copy: { main: { expand: true, cwd: ‘src/‘, src: ‘*‘, dest: ‘dest/‘, flatten: true, filter: ‘isFile', }, },

grunt-contrib-watch

watch模块用来在后台运行，监听指定事件，然后自动运行指定的任务。

watch: { scripts: { files: ‘<strong>/*.js', tasks: ‘jshint', options: { livereload: true, }, }, css: { files: ‘</strong>/<em>.sass', tasks: [‘sass'], options: { livereload: true, }, }, },</em>

设置好上面的代码，打开另一个进程，运行grunt watch。此后，任何的js代码变动，文件保存后就会自动运行jshint任务；任何sass文件变动，文件保存后就会自动运行sass任务。

需要注意的是，这两个任务的options参数之中，都设置了livereload，表示任务运行结束后，自动在浏览器中重载（reload）。这需要在浏览器中安装livereload插件。安装后，livereload的默认端口为localhost:35729，但是也可以用livereload: 1337的形式重设端口（localhost:1337）。

### 其他模块

下面是另外一些有用的模块。

（1）grunt-contrib-clean

该模块用于删除文件或目录。

clean: { build: { src: [“path/to/dir/one”, “path/to/dir/two”] } }

（2）grunt-autoprefixer

该模块用于为CSS语句加上浏览器前缀。

autoprefixer: { build: { expand: true, cwd: ‘build', src: [ ‘**/.css' ], dest: ‘build' } },

（3）grunt-contrib-connect

该模块用于在本机运行一个Web Server。

connect: { server: { options: { port: 4000, base: ‘build', hostname: ‘<em>‘ } } }</em>

connect模块会随着grunt运行结束而结束，为了使它一直处于运行状态，可以把它放在watch模块之前运行。因为watch模块需要手动中止，所以connect模块也就会一直运行。

（4）grunt-htmlhint

该模块用于检查HTML语法。

htmlhint: { build: { options: { ‘tag-pair': true, ‘tagname-lowercase': true, ‘attr-lowercase': true, ‘attr-value-double-quotes': true, ‘spec-char-escape': true, ‘id-unique': true, ‘head-script-disabled': true, }, src: [‘index.html'] } }

上面代码用于检查index.html文件：HTML标记是否配对、标记名和属性名是否小写、属性值是否包括在双引号之中、特殊字符是否转义、HTML元素的id属性是否为唯一值、head部分是否没有script标记。

（5）grunt-contrib-sass模块

该模块用于将SASS文件转为CSS文件。

sass: { build: { options: { style: ‘compressed' }, files: { ‘build/css/master.css': ‘assets/sass/master.scss' } } }

上面代码指定输出文件为build/css/master.css，输入文件为assets/sass/master.scss。

（6）grunt-markdown

该模块用于将markdown文档转为HTML文档。

markdown: { all: { files: [ { expand: true, src: ‘.md', dest: ‘docs/html/‘, ext: ‘.html' } ], options: { template: ‘templates/index.html', } } },

上面代码指定将md后缀名的文件，转为docs/html/目录下的html文件。template属性指定转换时采用的模板，模板样式如下。

<!DOCTYPE html> <html> <head> <title>Document</title> </head> <body> <div id=”main” class=”container”> <%=content%> </div> </body> </html>

{src: ‘foo/th<em>.js'}grunt-contrib-uglify {src: ‘foo/{a,b}</em>.js'} {src: [‘foo/a<em>.js', ‘foo/b</em>.js']}

至于combine目标，就只有一个files参数，表示输出文件是css子目录下的out.min.css，输入文件则是css子目录下的part1.min.css和part2.min.css。

files参数的格式可以是一个对象，也可以是一个数组。

files: { ‘dest/b.js': [‘src/bb.js', ‘src/bbb.js'], ‘dest/b1.js': [‘src/bb1.js', ‘src/bbb1.js'], }, // or files: [ {src: [‘src/aa.js', ‘src/aaa.js'], dest: ‘dest/a.js'}, {src: [‘src/aa1.js', ‘src/aaa1.js'], dest: ‘dest/a1.js'}, ],

如果minify目标和combine目标的属性设置有重合的部分，可以另行定义一个与minify和combine平行的options属性。

 grunt.initConfig({ cssmin: { options: { /<em> … </em>/ }, minify: { /<em> … </em>/ }, combine: { /<em> … </em>/ } } });

grunt # 默认情况下，先压缩后合并 grunt cssmin:minify # 只压缩不合并 grunt css:combine # 只合并不压缩

如果不指明目标，只是指明模块，就表示将所有目标依次运行一遍。

grunt cssmin

## 常用模块设置

grunt的模块已经超过了2000个，且还在快速增加。下面是一些常用的模块（按字母排序）。

*

jshint: { options: { eqeqeq: true, trailing: true }, files: [‘Gruntfile.js', ‘lib/

## 参考链接

• Frederic Hemberger, Un outil de build pour les projets front-end
• Mária Jurčovičová, Création d'une bibliothèque JavaScript avec Grunt.js
• Ben Briggs，Accélérez votre flux de travail de développement Web avec Grunt
• Optimisation des images avec Grunt
• Swapnil Mishra, Simplifier les tâches avec Grunt
• AJ ONeal, Passage à GruntJS
• Documentation Grunt, Configuration des tâches
• Landon Schropp, Écrire un superbe script de build avec Grunt
• Mike Cunsolo, Lève-toi et cours avec Grunt
• Matt Bailey, A Beginner's Guide to Using Grunt With Magento
  转自：http://javascript.ruanyifeng.com/tool/grunt.html

同时推荐：http://www.w3cplus.com/tools/writing-awesome-build-script-grunt.html

concat: { js: { src: [‘lib/module1.js', ‘lib/module2.js', ‘lib/plugin.js'], dest: ‘dist/script.js' } css: { src: [‘style/normalize.css', ‘style/base.css', ‘style/theme.css'], dest: ‘dist/screen.css' } },

js目标用于合并JavaScript文件，css目标用语合并CSS文件。两者的src属性指定需要合并的文件（input），dest属性指定输出的目标文件（output）。

### grunt-contrib-uglify

uglify模块用来压缩代码，减小文件体积。

uglify: { options: { banner: bannerContent, sourceMapRoot: ‘../‘, sourceMap: ‘distrib/‘+name+'.min.js.map', sourceMapUrl: name+'.min.js.map' }, target : { expand: true, cwd: ‘js/origin', src : ‘