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 [2023/10/03 22:20] (Version actuelle) – sgariepy
@@ Ligne 1: / Ligne 1: @@
-# testt
+====== 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:
+<code>
+gulp.task('js', ['jscs', 'jshint'], function() {
+    return gulp
+        .src('./src/**/*.js')
+        .pipe(concat('all.js'))
+        .pipe(uglify())
+        .pipe(gulp.dest('./build/'));
+});
+</code>
+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)''
+<code>
+gulp.task('lint-watcher', function() {
+    gulp.watch('./src/**/*.js', [
+        'jshint',
+        'jscs'
+    ]);
+});
+</code>
+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.
+<code>
+gulp.task('lint-watcher', function() {
+    gulp.watch('./src/**/*.less', function(event) {
+        console.log('watched event ' + event.type + ' for ' + event.path);
+    });
+});
+</code>
+===== Exemple =====
+  * [[web:javascript:gulp:copier-dependances-npm|Copier les dépendances npm]]