Différences

Ci-dessous, les différences entre deux révisions de la page.

--- web:javascript:gulp:toc [2015/12/20 19:09] – créée sgariepy
+++ web:javascript:gulp:toc [2022/02/02 00:42] – modification externe 127.0.0.1
@@ Ligne 1: / Ligne 1: @@
-# testt
+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);
+    });
+});
+```