Outils pour utilisateurs

Outils du site


web:javascript:gulp:toc

Ceci est une ancienne révision du document !


# 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);
  });

}); ```

web/javascript/gulp/toc.1450635069.txt.gz · Dernière modification : 2022/02/02 00:43 (modification externe)