Wiki SGY.io

Outils pour utilisateurs

Outils du site

Piste : • polices • bash
web:javascript:gulp:toc

Différences

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

Lien vers cette vue comparative

Les deux révisions précédentesRévision précédente
Prochaine révision		Révision précédente
web:javascript:gulp:toc [2015/12/20 19:10] – sgariepyweb:javascript:gulp:toc [2023/10/03 22:20] (Version actuelle) – sgariepy
Ligne 1: Ligne 1:
-# Build Automation with Gulp+====== 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 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.
Ligne 6: Ligne 7:
  
 Gulp peut servir à : Gulp peut servir à :
-* Minifier +  * Minifier 
-* Concaténer +  * Concaténer 
-* Compiler du CSS (LESS / SASS) +  * Compiler du CSS (LESS / SASS) 
-* Injecter des fichiers dans le HTML +  * Injecter des fichiers dans le HTML 
-* Angular template cache+  * 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 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+===== API ===== 
  
 Gulp a quatre fonctions: Gulp a quatre fonctions:
-* `gulp.task()` pour définir une tâche +  * `gulp.task()` pour définir une tâche 
-* `gulp.src()` pour lire des fichiers +  * `gulp.src()` pour lire des fichiers 
-* `gulp.dest()` pour écrire des fichiers +  * `gulp.dest()` pour écrire des fichiers 
-* `gulp.watch()` pour surveiller des fichiers+  * `gulp.watch()` pour surveiller des fichiers
  
-## Gulp.task+===== Gulp.task =====
  
-Syntaxe: `gulp.task(name, [, dep], fn)` 
  
-Le paramètre `name` est le nom de la tâche.+Syntaxe: ''gulp.task(name, [, dep], fn)''
  
-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.+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: Par exemple si on prend ce code:
  
-```js+<code>
 gulp.task('js', ['jscs', 'jshint'], function() { gulp.task('js', ['jscs', 'jshint'], function() {
     return gulp     return gulp
Ligne 41: Ligne 44:
         .pipe(gulp.dest('./build/'));         .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.+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+===== Gulp.src =====
  
-Syntaxe: `gulp.src(glob [, options])`+ 
 +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. C'est le début du flux de fichiers, en quelque sorte la lecture, ou la spécification des fichiers à traiter.
  
-### options+==== options ====
  
-* `base`: donne le répertoire racine des fichiers à traiter.  Par exemple `./src/`. 
  
 +  * ''base'': donne le répertoire racine des fichiers à traiter.  Par exemple ''./src/''.
 +
 +
 +===== Gulp.dest =====
  
-## 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. 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+===== 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)`+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.
  
-```js+Syntaxe : ''gulp.watch(glob, [, options], tasks)'' 
 + 
 +<code>
 gulp.task('lint-watcher', function() { gulp.task('lint-watcher', function() {
     gulp.watch('./src/**/*.js', [     gulp.watch('./src/**/*.js', [
Ligne 73: Ligne 80:
     ]);     ]);
 }); });
-```+</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.+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+<code>
 gulp.task('lint-watcher', function() { gulp.task('lint-watcher', function() {
     gulp.watch('./src/**/*.less', function(event) {     gulp.watch('./src/**/*.less', function(event) {
Ligne 83: Ligne 90:
     });     });
 }); });
-```+</code> 
  
 +===== Exemple =====
  
 +  * [[web:javascript:gulp:copier-dependances-npm|Copier les dépendances npm]]
  
  
web/javascript/gulp/toc.1450635012.txt.gz · Dernière modification : 2022/02/02 00:43 (modification externe)