Notez que cet article a été écrit il y a plus de 3 ans, mais il n'est pas forcément obsolète. Il a été mis à jour il y a moins de 3 mois.
Grunt ?
Grunt permet l’automatisation des tâches répétitives d’un développement comme la minification, la compilation (sass), la concaténation, les tests … Une fois configuré via un fichier Gruntfile, un task runner effectue le travail.
Installation
On ouvre une fenêtre d’invite de commande : a + R.
Grunt est en node.js. Pour savoir si node.js est installé :
|
1 |
C:\Users\xavier> node -v |
Sinon on utilise l’installateur pour Windows disponible sur le site nodejs.org. L’installateur permet également de mettre à jour nodejs.
On installe le package qui permet de gérer Grunt en ligne de commande.
|
1 |
C:\Users\xavier> npm install -g grunt-cli |
On se rend dans la racine du projet. On installe le package qui gère Grunt en ligne de commande.
|
1 |
K:\Project> npm init |
Et l’on répond aux entrées.
On installe Grunt en local dans le projet.
|
1 |
K:\Project> npm install grunt --save-dev |
On crée le fichier Gruntfile.js à la racine du projet. On écrit dans le fichier Gruntfile.js la base de configuration.
|
1 2 3 4 5 6 7 |
module.exports = function(grunt) { // Configuration de Grunt grunt.initConfig({}); // Définition des tâches Grunt grunt.registerTask("default", ""); }; |
Sass
On installe en local le package pour Sass.
|
1 |
K:\Project> npm install grunt-contrib-sass --save-dev |
Le dossier node_modules contient tous les modules que l’on pourra utiliser pour Gruntfile.js.
On écrit dans Gruntfile.js :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
module.exports = function(grunt) { grunt.initConfig({ sass: { // Nom de la tâche css: { // Nom de la sous-tâche options: { // Options style: "expanded" }, files: { // Liste des fichiers "assets/css/main.css": "assets/css/sass/main.scss", "assets/css/frontend.css": "assets/css/sass/frontend.scss", "assets/css/admin.css": "assets/css/sass/admin.scss" } } } }); // Import du package grunt.loadNpmTasks("grunt-contrib-sass"); // Redéfinition de la tâche `default` qui est la tâche lancée dès que Grunt est lancé sans argument. // sass est donc une tâche à lancer si on lance la tâche `default`. grunt.registerTask("default", ["sass:css"]); }; |
Utilisation sous Windows
On échappe le caractère backslash \ pour pouvoir l’utiliser dans le chemin des fichiers.
|
1 2 3 4 5 |
files: { // Liste des fichiers "assets\\css\\main.css": "assets\\css\\sass\\main.scss", "assets\\css\\frontend.css": "assets\\css\\sass\\frontend.scss", "assets\\css\\admin.css": "assets\\css\\sass\\admin.scss" } |
Si l’on veut généraliser les sources au lieu de les définir une par une, on peut écrire :
|
1 2 3 4 5 6 7 |
files: [{ expand: true, cwd: "assets\\css\\sass", src: ["*.scss"], dest: "assets\\css", ext: ".css" }] |
Plugin Sublime Text
On installe le plugin Grunt pour Sublime : Ctrl+Maj+P f Install f Grunt.
On indique au plugin l’emplacement du fichier Gruntfile.js s’il n’est pas à la racine (pour le développemnt d’un plugin par exemple) dans le fichier du projet projet.sublime-project :
exemple sous Windows
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
{ "folders": [ { "path": "." } ], "settings": { "SublimeGrunt": { "gruntfile_paths": ["wp-content\\plugins\\the-project"] } } } |
Concaténer les fichiers JavaScript
On installe le package Grunt : grunt-contrib-concat dans le projet.
|
1 |
K:\Project> npm install grunt-contrib-concat --save-dev |
L’option –save-dev sauvegarde le package dans package.json du projet pour pouvoir le réinstaller en faisant npm install.
On ajoute la tache dans le fichier Gruntfile.js.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
module.exports = function(grunt) { grunt.initConfig({ sass: { css: { options: { style: "expanded" }, files: { "assets/css/main.css": "assets/css/sass/main.scss", "assets/css/frontend.css": "assets/css/sass/frontend.scss", "assets/css/admin.css": "assets/css/sass/admin.scss" } } }, concat: { options: { separator: ";" // ajouter un ; entre chaque fichier concaténé. }, built: { src: ["js/file-1.js", "js/file-2.js", "js/file-3.js"], dest: "js/built.js" // fichier concatené } } }); grunt.loadNpmTasks("grunt-contrib-sass"); grunt.registerTask("default", ["sass:css", "concat:built"]); }; |
Compression
On installe le package Grunt : grunt-contrib-uglify dans le projet.
|
1 |
K:\Project> npm install grunt-contrib-uglify --save-dev |
On ajoute la tache dans le fichier Gruntfile.js.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
module.exports = function(grunt) { grunt.initConfig({ sass: { css: { options: { style: "expanded" }, files: { "assets/css/main.css": "assets/css/sass/main.scss", "assets/css/frontend.css": "assets/css/sass/frontend.scss", "assets/css/admin.css": "assets/css/sass/admin.scss" } } }, concat: { options: { separator: ";" // ajouter un ; entre chaque fichier concaténé. }, built: { src: ["js/file-1.js", "js/file-2.js", "js/file-3.js"], dest: "js/built.js" // fichier concatené } }, }); grunt.loadNpmTasks("grunt-contrib-sass"); grunt.registerTask("default", ["sass:css", "concat:built"]); }; |
Et hop, un mécanisme automatique pour lancer les tâches nécessaires au développement d’un projet.
Un fichier de démarrage package.json :
Un fichier de démarrage pour installer les dépendances du développement. Le projet s’appelle clio-search, c’est un plugin pour WordPress.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
{ "name": "clio-search", "title": "Clio Search", "version": "0.0.1", "description": "A Clio plugin to enhance WordPress Search", "author": { "name": "Xavier Birnie-Scott", "url": "https://murviel-info.com" }, "license": "GPLv3", "devDependencies": { "grunt": "latest", "grunt-contrib-watch": "latest", "grunt-contrib-sass": "latest", "grunt-contrib-concat": "latest", "grunt-contrib-uglify": "latest", "grunt-wp-i18n": "latest" }, "scripts": { } } |
Ce n’est pas la fin…
