14
7/21/2019 Configurer Grunt Pour Votre Premier Build en Javascript http://slidepdf.com/reader/full/configurer-grunt-pour-votre-premier-build-en-javascript 1/14 Configurer Grunt pour votre premier build en javascript 08/07/2014 Jordane Grenat Commenter Allez aux commentaires Introduction Dans le précédent article , je pr ésentais Grunt d’un point de vue fonctionnel, sans rentrer dans les d étails techniques. Ce second article va donc s’int éresser plus directement à l’installation et à la configuration de Grunt pour parvenir à réaliser ses t âches et workflows personnalis és afin de faciliter au mieux le d éveloppement du projet. Plus tard, un troisi ème article vous apprendra comment d éfinir vos propres t âches complexes. Pour des raisons pratiques, nous allons utiliser comme fil rouge la mise en place des workflows d’une application web présente sous la forme d’une unique page index.html avec du javascript et du CSS. Mise en place Pr é requis Pour ceux qui n’ont jamais eu l’occasion de travailler avec Node.js / npm, nous allons voir comment les installer. Le mieux serait de l’installer en t éléchargeant la derni ère version sur le site officiel . Cependant, vous pouvez également l’installer rapidement via votre gestionnaire de paquets si vous être sous un OS Debian-like (pour les autres, voir ce tutoriel) , m ême s’il ne s’agira pas forc ément de la version la plus à jour : sudo apt-get install nodejs view raw code024.sh hosted with by GitHub Le package npm sera install é automatiquement avec. Il s’agit du gestionnaire de paquets de Node.js . Il va nous permettre d’installer tr ès simplement des t âches Grunt qui sont pour la quasi-totalit é référenc ées sur npm . Il faut savoir qu’il existe deux fa çons d’installer un package : en global avec npm install -g nomDuPackage , ce qui le rend accessible partout sur votre ordinateur en local avec npm install nomDuPackage , ce qui va l’installer dans un sous-dossier node_modules . Pour ex écuter un fichier javascript avec Node.js, il suffit d’utiliser la commande node monFichier.js . Le projet Nous allons maintenant cr éer une application web simpliste pour nos exemples. Les fichiers dont nous avons besoin se trouvent tous dans ce dépôt Git . Clonez le d épôt (ou t éléchargez le zip pour l’extraire à l’endroit de votre choix). Une fois le projet r écup éré, vous pouvez ouvrir la page index.html dans votre navigateur pour voir la page qui servira

Configurer Grunt Pour Votre Premier Build en Javascript

Embed Size (px)

DESCRIPTION

Configurer Grunt Pour Votre Premier Build en Javascript

Citation preview

Page 1: Configurer Grunt Pour Votre Premier Build en Javascript

7/21/2019 Configurer Grunt Pour Votre Premier Build en Javascript

http://slidepdf.com/reader/full/configurer-grunt-pour-votre-premier-build-en-javascript 1/14

Configurer Grunt pour votre premier build en javascript

08/07/2014 Jordane Grenat Commenter Allez aux commentaires

Introduction

Dans le précédent article , je pr ésentais Grunt d’un point de vue fonctionnel, sans rentrer dans les d étails techniques.Ce second article va donc s’int éresser plus directement à l’installation et à la configuration de Grunt pour parvenir à réaliser ses t âches et workflows personnalis és afin de faciliter au mieux le d éveloppement du projet. Plus tard, untroisi ème article vous apprendra comment d éfinir vos propres t âches complexes.

Pour des raisons pratiques, nous allons utiliser comme fil rouge la mise en place des workflows d’une application webprésente sous la forme d’une unique page index.html avec du javascript et du CSS.

Mise en place

Pr é requis

Pour ceux qui n’ont jamais eu l’occasion de travailler avec Node.js / npm, nous allons voir comment les installer. Lemieux serait de l’installer en t éléchargeant la derni ère version sur le site officiel . Cependant, vous pouvez égalementl’installer rapidement via votre gestionnaire de paquets si vous être sous un OS Debian-like (pour les autres, voir cetutoriel) , m ême s’il ne s’agira pas forc ément de la version la plus à jour :

sudo apt-get install nodejs

view raw code024.sh hosted with by GitHub

Le package npm sera install é automatiquement avec. Il s’agit du gestionnaire de paquets de Node.js . Il va nouspermettre d’installer tr ès simplement des t âches Grunt qui sont pour la quasi-totalit é réf érenc ées sur npm . Il faut

savoir qu’il existe deux fa çons d’installer un package :

• en global avec npm install -g nomDuPackage , ce qui le rend accessible partout sur votre ordinateur

• en local avec npm install nomDuPackage , ce qui va l’installer dans un sous-dossier node_modules .

Pour ex écuter un fichier javascript avec Node.js, il suffit d’utiliser la commande node monFichier.js .

Le projet

Nous allons maintenant cr éer une application web simpliste pour nos exemples. Les fichiers dont nous avons besoin

se trouvent tous dans ce dépôt Git . Clonez le d épôt (ou t éléchargez le zip pour l’extraire à l’endroit de votre choix).Une fois le projet r écupéré, vous pouvez ouvrir la page index.html dans votre navigateur pour voir la page qui servira

Page 2: Configurer Grunt Pour Votre Premier Build en Javascript

7/21/2019 Configurer Grunt Pour Votre Premier Build en Javascript

http://slidepdf.com/reader/full/configurer-grunt-pour-votre-premier-build-en-javascript 2/14

pour nos tests.

Installer Grunt

Maintenant que nous avons notre application basique, nous allons pouvoir nous concentrer sur Grunt en lui-m ême. Ily a deux éléments à installer. Tout d’abord, installons le package global :

npm install -g grunt-cli

view raw code001.sh hosted with by GitHub

Puis nous allons installer le package local, en n’oubliant pas de cr éer au passage un fichier package.json pour stockernos d épendances. Ce fichier permet à npm de « m émoriser » les d épendances de notre projet en indiquant les paquetsà installer et leur version. De cette mani ère, il suffit pour un d éveloppeur d’ex écuter la commande npm install dans le m ême r épertoire que le fichier pour que soient install és tous les modules n écessaires au projet.

Les d épendances peuvent être de deux types : les devDependencies qui ne servent que pendant l’ étape dedéveloppement (par exemple les librairies de tests), et les dependencies qui servent toujours. Ici, il s’agit d’unedépendance utile simplement quand nous d éveloppons, donc pour demander à npm de sauvegarder notre d épendancedans le package.json , nous utilisons l’option --save-dev (sinon nous aurions utilis é --save ).

npm init

# R épondez aux quelques questions simples pour cr éer le package.json

npm install grunt --save-dev

# Le save-dev permet d'ajouter la d épendance dans le package.json

view raw code002.sh hosted with by GitHub

Vous pouvez ouvrir votre fichier package.json et constater que grunt a bien été rajout é par npm dans les d épendances.

Le Gruntfile

Maintenant que tout est install é, il est temps de commencer à configurer Grunt ! Tout se passe dans un seul fichier, le

fichier Gruntfile.js. Celui-ci va d éfinir toutes les t âches qui pourront être ex écutées. Et le contenu minimal de cefichier tient sur… une ligne !

Page 3: Configurer Grunt Pour Votre Premier Build en Javascript

7/21/2019 Configurer Grunt Pour Votre Premier Build en Javascript

http://slidepdf.com/reader/full/configurer-grunt-pour-votre-premier-build-en-javascript 3/14

module.exports = function(grunt) { };

view raw code003.js hosted with by GitHub

Bbien évidemment, u n fichier aussi minimal ne perme t de lanc er aucune t âche, mais c’est dans cette simple fonctionque nous allons oeuv rer. On peut remarquer l’objet gr unt pa ssé en argument qui expose de nombreusesfonctionnalit és que nous allons pouvoir utiliser pour configurer Grunt.

La premi ère m éthode que nous allons voir, grunt.initConfig() , est la plus importante, puisqu’ elle va nous permettre deconfigurer chac un des plugins que nous allons utiliser par la suite. Elle prend en argument un simple objet quicontiendra les param ètres à passer aux plugins (Grunt privil égie la configuration au code) :

module.exports = function(grunt) {

grunt.initConfig({

// Configuration des t âches

});

};

view raw code004.js hosted with by GitHub

Charg er les pl ugins Grunt

Un plugin Grunt doit être charg é avec grunt.loadNpmTasks('nom-du-plugin'); . Pour nous simplifier lavie, il existe un plugin qui va charger automatiquement tous les modules pr ésents dans notre package.json dont lenom commence par grunt- , ce qui repr ésente la quasi-totalit é des plugins Grunt. Commen çons par l’installer :

npm install load-grunt-tasks --save-dev

view raw code006.js hosted with by GitHub

Page 4: Configurer Grunt Pour Votre Premier Build en Javascript

7/21/2019 Configurer Grunt Pour Votre Premier Build en Javascript

http://slidepdf.com/reader/full/configurer-grunt-pour-votre-premier-build-en-javascript 4/14

Puis nous appelons s implement le plugin dans notre co de :

module.exports = function (grunt) {

// Charge les plugins Grunt automatiquement

require('load-grunt-tasks')(grunt);

grunt.initConfig({

// Configuration des t âches

});

};

view raw code005.js hosted with by GitHub

Maintena nt que tout est install é, nous allons pouvoir r éfléchir à ce que nous voulons faire.

Lorsqu’o n souhaite e nvoyer notre site en production, n ous allo ns assembler et minifier nos fichiers CSS (m ême s’iln’y en a q u’un pour l ’instant). Puis nous allons minifie r et regr ouper en un seul fichier nos ressources javascript etdonc rem placer auto matiquement les scripts inclus dan s notre page index.html . Tout cela permettra de g énérer undossier dist contenant les sources de notre application.

Configuration de notre GruntFile

Cr é er nos t â ches principales

Nous allons donc avoir une t âche principale qui, par convention, s’appelera build et qui sera charg ée de g énérer cedossier dist prêt pour une mise en production.

Avec Grunt, cela se fait tr ès facilement gr âce à la m éthode grunt.registerTask qui prend comme param ètres le nom dela t âche à créer, et la liste des t âches à appeler.

module.exports = function (grunt) {

Page 5: Configurer Grunt Pour Votre Premier Build en Javascript

7/21/2019 Configurer Grunt Pour Votre Premier Build en Javascript

http://slidepdf.com/reader/full/configurer-grunt-pour-votre-premier-build-en-javascript 5/14

// Charge les plugins Grunt automatiquement

require('load-grunt-tasks')(grunt);

grunt.initConfig({

// Configuration des t âches

});

// La liste de t âches est vide, nous la remplirons par la suite.

grunt.registerTask('build', []);

};

view raw code007.js hosted with by GitHub

Attention ! Il convie nt, avant de lire la suite, d’ étudier la fa çon dont sont repr ésent és les fichiers. En effet, pourfaciliter l e développe ment et l’utilisation des plugins, Grunt m et en place une abstraction tr ès performante pour ciblerceux-ci. L es explicat ions justifieraient à elles seules l’ écriture d’un article, je vous recommande donc de consulter ladocument ation à ce s ujet pour appr éhender tous les dif f érents f ormats utilisables et leurs possibilit és.

Copier les fich iers

Pour g énérer un dossier dist contenant notre site pr êt à être mis en production, il va nous falloir copier tous les fichiersdont nous avons besoin. Cela peut être r éalis é très simplement gr âce à la t âche copy . Installons-la directement :

npm install --save-dev grunt-contrib-copy

view raw code008.sh hosted with by GitHub

Il nous suffit simplement d’indiquer les fichiers à copier et la destination. Nous ne prenons pas en compte ici les

Page 6: Configurer Grunt Pour Votre Premier Build en Javascript

7/21/2019 Configurer Grunt Pour Votre Premier Build en Javascript

http://slidepdf.com/reader/full/configurer-grunt-pour-votre-premier-build-en-javascript 6/14

fichiers ja vascript et CSS qui seront copi és d’une autre façon. Voici le rendu de la configuration :

grunt.initConfig({

copy: {

dist: {

src: ['*.html', 'images/**/*'],

// Vous pouvez bien s ûr rajouter d'autres fichiers selon les besoins

dest: 'dist/'

}

}

});

view raw code009.js hosted with by GitHub

grunt.reg isterTask('b uild', ['copy:dist']);

view raw code010.js hosted with by GitHub

A chaque appel à la t âche build, nos fichiers vont être copi és dans le r épertoire dist/ . Mais cela signifie égalementqu’à chaq ue appel, le s fichiers pr écédemment copi és seront to ujours l à ! En g énéral, cela ne pose pas de soucis, maissi nous su pprimons u n fichier dans notre projet, il y a fort à parier qu’il sera toujours pr ésent dans le r épertoire dist/ par la suit e !

Il faut do nc égaleme nt penser à vider le r épertoire ava nt de cop ier les fichiers, ce qui se fait ais ément avec la t âche

clean , que nous allons installer et configurer tr ès facilement :

Page 7: Configurer Grunt Pour Votre Premier Build en Javascript

7/21/2019 Configurer Grunt Pour Votre Premier Build en Javascript

http://slidepdf.com/reader/full/configurer-grunt-pour-votre-premier-build-en-javascript 7/14

npm install --save-dev grunt-contrib-clean

view raw code011.sh hosted with by GitHub

// La conf iguration

clean: {

dist: ['dist/*']

}

// [...]

// On rajoute la sous-t âche "dist" de la t âche "clean".

grunt.registerTask('build', ['clean:dist', 'copy:dist']);

view raw code012.js hosted with by GitHub

Regro uper et minifier les fichiers CSS

La t âche cssmin perm et de regrouper les fichiers tr ès s impleme nt. Cela doit devenir un automatisme, nous allonsinstaller l e module n pm correspondant :

npm install --save-dev grunt-contrib-cssmin

Page 8: Configurer Grunt Pour Votre Premier Build en Javascript

7/21/2019 Configurer Grunt Pour Votre Premier Build en Javascript

http://slidepdf.com/reader/full/configurer-grunt-pour-votre-premier-build-en-javascript 8/14

view raw code013.sh hosted with by GitHub

Encore u ne fois, avec la documentation, la syntaxe est facile à prendre en main :

cssmin: {

dist: { // Le nom de notre sous-t âche est "dist"

files: {

'dist/public/global.min.css': ['css/**/*.css']

// On regroupe tous les fichiers CSS minifi és dans un global.min.css

}

}

}

// [...]

// On n'oublie pas de rajouter la t âche à notre build

grunt.registerTask('build', ['clean:dist', 'copy:dist', 'cssmin:dist']);

view raw code014.js hosted with by GitHub

Regro uper et minifier les fichiers Jav ascrip t

L’ équival ent de la t âche cssmin pour le javascript est uglify . Aucune surprise, le fonctionnement est tr ès semblable :

Page 9: Configurer Grunt Pour Votre Premier Build en Javascript

7/21/2019 Configurer Grunt Pour Votre Premier Build en Javascript

http://slidepdf.com/reader/full/configurer-grunt-pour-votre-premier-build-en-javascript 9/14

npm install --save-dev grunt-contrib-uglify

view raw code015.sh hosted with by GitHub

uglify: {

dist: {

files: {

'dist/public/scripts.min.js': ['js/**/*.js']

}

}

}

// [...]

grunt.registerTask('build', ['clean:dist', 'copy:dist', 'cssmin:dist', 'uglify:dist']);

view raw code016.js hosted with by GitHub

Nous avo ns dor énava nt nos fichiers javascript et css m inifi és… Mais il reste un probl ème ! En effet, nos fichiers sontbien cr éés, mais ce s ont toujours les anciens fichiers n on minif iés qui sont inclus dans nos pages ! Nous allons voirmaintena nt comment rectifier cela.

Modifier les fichiers inclus

Voici le probl ème qui se pose : nous devons analyser le code source de nos pages pour retirer les inclusions de scriptet de css et les remplacer par des inclusions de nos fichiers uniques minifi és.

Une fois encore, un simple plugin va nous simplifier la vie ! Il s’agit cette fois-ci du plugin usemin . Je vous invite à

Page 10: Configurer Grunt Pour Votre Premier Build en Javascript

7/21/2019 Configurer Grunt Pour Votre Premier Build en Javascript

http://slidepdf.com/reader/full/configurer-grunt-pour-votre-premier-build-en-javascript 10/14

consulter la documentation pour ce plugin, mais voici en r ésum é ce qu’il fait :

• Une t âche useminPrepare va analyser le code des fichiers sp écifi és à la recherche de blocs

<!-- build:{type} {destination} -->

{...}

<!-- endbuild -->

view raw code017.html hosted with by GitHub

• Cette t âche co nfigure ensuite les t âches pr écisées pour m ettre en place un workflow de changements. Pardéfaut :

o conca t (qui permet de concat éner plusi eurs fich iers en un seul) puis uglify pour le JS

o concat puis cssmin pour le CSS

• La t âche usemin remplace ensuite les blocs par la r éf érence vers le bon fichier

Cela signifie entre autre que nous n’aurons plus besoin des configurations des t âches uglify et cssmin que nous avonsmises en place plus haut. Enlevez-les donc ! Dor énavant, c’est usemin qui va s’en occuper. Pour la t âche concat ,celle-ci est inutile car les fichiers seront d é jà regroup és par les autres t âches dans notre cas. Passons tout de suite à lamise en place :

npm install --save-dev grunt-usemin

view raw code018.sh hosted with by GitHub

Dans le index.html , fo rmez vos blocs de la fa çon suiva nte :

<!-- Pour les CSS : -- >

<!-- build:css public/global.css -->

Page 11: Configurer Grunt Pour Votre Premier Build en Javascript

7/21/2019 Configurer Grunt Pour Votre Premier Build en Javascript

http://slidepdf.com/reader/full/configurer-grunt-pour-votre-premier-build-en-javascript 11/14

<link rel="stylesheet" href="css/main.css" type="text/css" />

<!-- endbuild -->

<!-- Pour les JS : -->

<!-- build:js public/scripts.js -->

<script src="js/add.js"></script>

<script src="js/substract.js"></script>

<!-- endbuild -->

view raw code019.html hosted with by GitHub

On config ure ensuite no s workflows et les fichiers à anal yser à la recherche des blocs :

useminPr epare: {

html: {

src: ['index.html']

},

options: {

flow: {

Page 12: Configurer Grunt Pour Votre Premier Build en Javascript

7/21/2019 Configurer Grunt Pour Votre Premier Build en Javascript

http://slidepdf.com/reader/full/configurer-grunt-pour-votre-premier-build-en-javascript 12/14

steps: {

js: ['uglifyjs'],

css: ['cssmin'],

},

post: {}

}

}

}

view raw code020.js hosted with by GitHub

Puis on in dique o ù remplacer les blocs à usemin :

usemin: {

html: 'dist/index.html'

}

view raw code021.js hosted with by GitHub

Enfin, on configure n otre t âche build :

grunt.regi sterTask('b uild', [

Page 13: Configurer Grunt Pour Votre Premier Build en Javascript

7/21/2019 Configurer Grunt Pour Votre Premier Build en Javascript

http://slidepdf.com/reader/full/configurer-grunt-pour-votre-premier-build-en-javascript 13/14

'clean:dist',

'copy:dist',

'useminPrepare',

'cssmin',

'uglify',

'usemin'

]);

view raw code022.js hosted with by GitHub

Il suffit al ors de lanc er notre t âche Grunt en se pla çant dans le répertoire principal lorsque l’on souhaite effectuer unbuild de n otre applic ation (par exemple en vue d’une mise en p roduction) :

grunt bui ld

view raw code023.sh hosted with by GitHub

Conc lusion

L’ensemble des sources de cet article est disponible sur ce dépôt Git .

Nous avons vu ici comment mettre en place une t âche de mise en production pour notre application, mais il fautgarder à l’esprit que les possibilit és de Grunt sont presque infinies !

Comme nous l’avons constat é, il existe de tr ès nombreux plugins permettant d’effectuer presque toutes les t âchespossibles et imaginables. Il existe cependant des cas o ù ceux-ci ne su ffiront pas.

Page 14: Configurer Grunt Pour Votre Premier Build en Javascript

7/21/2019 Configurer Grunt Pour Votre Premier Build en Javascript

http://slidepdf.com/reader/full/configurer-grunt-pour-votre-premier-build-en-javascript 14/14

Dans cette optique, nous verrons dans un troisi ème article la mani ère de cr éer nos propres t âches Gruntpersonnalis ées.