Attention ! Cet article a plus de 1 an (2711 jours), ce qui signifie qu'il n'est pas forcément à jour !
Tout d’abord, Gulp est un gestionnaire de tâches pour automatiser plusieurs actions telles que la compilation en CSS de SASS, LESS, etc, la concaténation de JS, "minify" de fichiers, et plusieurs autres. Il existe quelques "task runner", les deux plus populaires à l’heure actuelle sont Gulp et Grunt. J’ai choisi Gulp pour sa rapidité et sa facilité. À la suite de cet article vous allez avoir un GULP fonctionnel et pratique pour effectuer quelques tâches. Je ferai éventuellement un autre article où je donnerai ma configuration de Gulp que j’utilise à tous les jours.
Pour les besoins de l’article, je présume que vous n’avez jamais utilisé un "task runner" et n’êtes peut-être pas très à l’aise avec l’interface de ligne de commandes. Je vais y aller avec le tout début, étape par étape, pour que tous soyons au même niveau.
Gulp fonctionne sur NODEJS (un environnement pour développer des applications web côté serveur et qui est d’autant plus open-source). Donc allons directement installer NODEJS en notre première étape.
1 - Installer Node
Cette étape est très simple, allez sur le site de Nodejs.org et appuyez sur le bouton installation selon votre version de système.
2 - Utiliser sa console de commandes en ligne
Vous n’êtes peut-être pas familier avec ce type d’outils, on se sent comme un "hackeur" quand on commence à jouer avec. Ça peut sembler repoussant au début, mais on vient vite habitué par son utilité. Votre console dépend beaucoup de votre système, Terminal pour OSX, Command Prompt pour Windows. Il existe quelques versions que l’on peut mettre en "surcouche" de ces bases. Je vous conseille aussi fortement d’installer GIT Bash. Il va vous permettre d’utiliser GIT en ligne de commande mais aussi, cet outil de commandes en ligne est plus esthétique que le très ennuyeux outil par défaut.
Ouvrez votre outil et tappez :
node -vAppuyez sur ENTER, et votre terminal devrait vous retourner la version de Node que nous venons d’installer. Si ce n’est pas le cas alors il s’est produit un problème lors de l’étape 1 ou que vous devez repartir votre outil.
Faites la même chose pour NPM
npm -vNPM veut dire Node Package Manager et sert à une gestion des modules (des dépendances au projet). C’est comme d’ajouter des pluggins à notre NODEJS. On va devoir s’en servir pour chaque outil que l’on va utiliser dans GULP. Il existe une panoplie de "packages" accessibles et que l’on peut retrouver sur le site de NPM
3 - Créer un répertoire de travail
Avec le terminal, vous pouvez écrire la commande ls pour afficher ce qu’il y a dans votre répertoire ( dir sous Windows) et la commande cd pour changer de répertoire. Pour créer un répertoire vous pouvez utiliser la commande mkdir. Un exemple pour se déplacer serait :
cd /my-user/my-project Une fois rendu dans votre répertoire, faites une commande NPM pour créer un fichier package.json
npm initVous allez devoir répondre à quelques questions concernant votre projet et va terminer en créant le fichier package.json. Ce fichier contient les informations sur votre projet et va gérer les dépendances de celui-ci. Maintenant nous pouvons installer Gulp.
4 - Installer Gulp
sudo npm install -g gulp De petites explications s’imposent.
- sudo est seulement nécessaire sous OSX et permet d’installer le package de façon GLOBAL en vous attribuant des accès administrateur. Terminal va donc vous demander votre mot de passe administrateur.
- npm est le nom de l’application que nous voulons utiliser pour installer notre package.
- Nous lui disons d’exécuter la commande install.
- Le -g est ce que l’on appelle un flag, nous lui disons donc d’installer le package de façon GLOBAL. De cette manière nous nous permettons d’utiliser ce même package dans tous nos projets. En d’autres mots, Gulp ne sera pas dépendant du projet, car il est accessible continuellement sur notre ordinateur et ce, pour tous nos futurs projets.
- Finalement, nous lui disons le nom du package à installer.
Nous pouvons vérifier que tout est bien installé en exécutant la commande :
gulp -vCe qui vous donnera comme précédemment la version de Gulp.
Si toutefois vous avez eu des messages d’erreur durant l’installation, alors vous allez devoir vous y pencher avant de continuer.
Maintenant installons Gulp de façon locale.
npm install --save-dev gulp La seule différence ici est le flag — save-dev qui indique d’ajouter Gulp dans les devDependencies de notre fichier package.json.
Maintenant que gulp est installé, ajoutons la configuration de ce dernier.
5 - Configurer notre Gulpfile et exécuter Gulp
Une fois Gulp installé, nous devons lui donner des instructions pour qu’il sache quelles tâches exécuter. Disons que pour notre projet, nous désirerions mettre Lint pour notre JavaScript, compiler nos fichiers SASS, concatener nos JavaScript ainsi que minifier et renommer le tout.
Installons les packages nécessaires
npm install jshint gulp-jshint gulp-sass gulp-concat gulp-uglify gulp-rename --save-dev Cette commande va installer tous nos packages nécessaires et les ajouter dans notre liste de devDependencies dans notre fichier package.json.
Créer notre gulpfile
Maintenant que nous avons nos packages, nous pouvons écrire notre gulpfile et indiquer à Gulp quoi faire avec. Gulp a 5 méthodes, ces méthodes sont : task, run, watch, src et dest.
Dans votre répertoire créez un fichier gulpfile.js avec ceci à l’intérieur :
// Include gulp
var gulp = require('gulp');
// Include Our Plugins
var jshint = require('gulp-jshint');
var sass = require('gulp-sass');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
// Lint Task
gulp.task('lint', function() {
return gulp.src('js/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'));
});
// Compile Our Sass
gulp.task('sass', function() {
return gulp.src('scss/*.scss')
.pipe(sass())
.pipe(gulp.dest('css'));
});
// Concatenate & Minify JS
gulp.task('scripts', function() {
return gulp.src('js/*.js')
.pipe(concat('all.js'))
.pipe(gulp.dest('dist'))
.pipe(rename('all.min.js'))
.pipe(uglify())
.pipe(gulp.dest('dist'));
});
// Watch Files For Changes
gulp.task('watch', function() {
gulp.watch('js/*.js', ['lint', 'scripts']);
gulp.watch('scss/*.scss', ['sass']);
});
// Default Task
gulp.task('default', ['lint', 'sass', 'scripts', 'watch']);Mais qu’est-ce que tout cela?
Les deux premiers paragraphes ajoutent et dictent à Gulp que ces packages sont nécessaires pour exécuter nos tâches. Ces tâches sont lint, sass, scripts et default
Tâche Lint
// Lint Task
gulp.task('lint', function() {
return gulp.src('js/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'));
});Notre tâche lint vérifie tous les fichiers avec l’extension JS dans notre dossier JS et s’assure qu’il n’y ait pas d’erreurs de syntax dans notre code.
Tâche SASS
// Compile Our Sass
gulp.task('sass', function() {
return gulp.src('scss/*.scss')
.pipe(sass())
.pipe(gulp.dest('css'));
});La tâche sass compile nos fichiers sass contenus dans le répertoire scss, les convertit en css et les met ensuite dans le répertoire css.
Tâche script
// Concatenate & Minify JS
gulp.task('scripts', function() {
return gulp.src('js/*.js')
.pipe(concat('all.js'))
.pipe(gulp.dest('dist'))
.pipe(rename('all.min.js'))
.pipe(uglify())
.pipe(gulp.dest('dist'));
});La tâche script fait une concatenation de nos javascripts de notre répertoire js et les enregistre dans notre répertoire dist. Gulp prend ensuite ce fichier et le minifie, le renomme et l’enregistre à nouveau dans le répertoire dist.
Tâche watch
// Watch Files For Changes
gulp.task('watch', function() {
gulp.watch('js/*.js', ['lint', 'scripts']);
gulp.watch('scss/*.scss', ['sass']);
});La tâche watch sert à exécuter des tâches prédéfinies dès que nos fichiers ont été modifiés. La méthode gulp.watch() va attendre qu’il y ait des modifications sur un fichier et va ensuite exécuter la tâche. C’est très pratique pour que nous ne soyons pas obligés d’exécuter nos tâches à chaque fois que l’on apporte des modifications à un fichier. C’est gulp qui va donc gérer cela.
Tâche default
// Default Task
gulp.task('default', ['lint', 'sass', 'scripts', 'watch']);Finalement notre tâche default est simplement un wrapper qui englobe toutes nos tâches. C’est la tâche qui va être exécutée en lançant la commande gulp dans l’ordre que nous lui avons dit.
Maintenant dans votre terminal:
gulpGulp devrait partir, exécutant toutes nos tâches et se mettre en attente de modifications de fichiers, due à notre tâche watch.
Donc voilà nous avons créé notre premier gulp. Nous pouvons par la suite facilement le modifier, y ajouter des tâches, le perfectionner, etc.
Éventuellement je publierai un autre article avec mon Gulp que j’utilise.
N’hésitez pas si vous avez des questions.