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.

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

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:

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.

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.

• base: donne le répertoire racine des fichiers à traiter. Par exemple ./src/.

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.

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)

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.

gulp.task('lint-watcher', function() {
    gulp.watch('./src/**/*.less', function(event) {
        console.log('watched event ' + event.type + ' for ' + event.path);
    });
});

• Copier les dépendances npm