Ceci est une ancienne révision du document !
Voir https://gitlab.sgy.io/cbt/pluralsight-gulp/wikis/home
# Automatisation avec Gulp
Gulp permet d'automatiser des tâches. Ce sont des tâches qui contrôlent la qualité du code, effectuer des tests, et autres tâches en pipeline.
Gulp peut servir à :
- Minifier
- Concaténer
- Compiler du CSS (LESS / SASS)
- Injecter des fichiers dans le HTML
- Angular template cache
Gulp a une architecture en pipeline, c'est-à-dire que qu'il a une entrée de fichiers, fait des modifications, passe à l'autre processus pour la modification suivante, qui la passe au processus suivant et ainsi de suite. Une fois les processus tous effectués, il y a écriture des fichiers sur le système de fichiers.
# API
Gulp a quatre fonctions:
- `gulp.task()` pour définir une tâche
- `gulp.src()` pour lire des fichiers
- `gulp.dest()` pour écrire des fichiers
- `gulp.watch()` pour surveiller des fichiers
## Gulp.task
Syntaxe: `gulp.task(name, [, dep], fn)`
Le paramètre `name` est le nom de la tâche.
Le paramètre `dep` est un paramètre facultatif qui prend un tableau de nom de tâches. Ce sont les tâches auxquelles la tâche courante a des dépendances.
Par exemple si on prend ce code:
```js gulp.task('js', ['jscs', 'jshint'], function() {
return gulp .src('./src/**/*.js') .pipe(concat('all.js')) .pipe(uglify()) .pipe(gulp.dest('./build/'));
}); ```
ceci signifie que la tâche `js` est dépendante des tâches `jscs` et `jshint`. Les dépendances sont exécutés en parallèle et non en séquence et alors, une fois les dépendances exécutés, la tâche `js` est exécutée.
## Gulp.src
Syntaxe: `gulp.src(glob [, options])`
C'est le début du flux de fichiers, en quelque sorte la lecture, ou la spécification des fichiers à traiter.
### options
* `base`: donne le répertoire racine des fichiers à traiter. Par exemple `./src/`.
## Gulp.dest
Utilisé pour écrire les fichiers, pour écrire les fichiers de destination ailleurs que la source ou pour écrire le même fichier ou un nouveau fichier.
## Gulp.watch
Exécute des tâches lorsque les fichiers du `glob` changent. Le `.watch()` est utile pour effectuer des tests, faire du code linting, ou par exemple compiler vers le CSS.
Syntaxe : `gulp.watch(glob, [, options], tasks)`
```js gulp.task('lint-watcher', function() {
gulp.watch('./src/**/*.js', [ 'jshint', 'jscs' ]);
}); ```
La fonction fournie en paramètre de `.watch()` peut prendre aussi un paramètre `event`. Ceci permet d'exécuter du code quand un fichier est *matché* par les changements du glob.
```js gulp.task('lint-watcher', function() {
gulp.watch('./src/**/*.less', function(event) { console.log('watched event ' + event.type + ' for ' + event.path); });
}); ```