Tutoriel gulp : Les nouveautés de gulp 4

La version 4 de gulp changent certains fonctionnements afin de le rendre plus simple à utiliser et simplifie notamment la composition de tâches.

gulp.task disparaît

La méthode task() est maintenant dépréciée au profit de simples fonctions.

// avant
gulp.task('sass', function () {
  // gulp.src...
})

// après
function sass () {
  // gulp.src....
}
module.exports = {
  sass: sass
}

Maintenant de simple fonctions peuvent être utilisée pour définir vos tâches. Seules les fonctions qui sont exportées seront disponible avec la commande gulp.

Composition via gulp.series() et gulp.parallel()

Un des gros problèmes rencontré avec gulp était la composition de tâche et il était très difficile de contrôler l'ordre d'exécution des tâches. On avait recours au second paramètre de la méthode task.

// avant
gulp.task('default', ['sass', 'script'])

// après
module.exports = {
  default: gulp.series(clean, gulp.parallel(sass, scripts))
}

Ces 2 méthodes permettent aujourd'hui d'avoir un contrôle total afin de créer des tâches qui s'exécutent de manière optimisées.

Les sourcemaps natif

Les sourcemaps sont maintenant gérés nativement et il est possible de l'inclure dans le fichier original ou d'utiliser un fichier séparé si on indique un chemin visible.

gulp.src('scss/style.scss', {sourcemaps: true})
   .pipe(sass())
   .pipe(gulp.dest('css/style.css', {sourcemaps: '.'}))

Optimisation des builds consécutifs

Les watchers permettent de re-éxécuter une tâche lorsqu'un fichier est modifié. Malheureusement, les tâches étaient re-éxécutées sur tous les fichier à chaque fois. Par exemple, si on prend le code suivant, une modification d'un fichier jpg entraîne le redimensionnement de toutes les images du dossier. Ce qui est peu optimisé et peut très rapidement prendre un temps conséquent.

function resize() {
  return gulp.src('img/*.jpg')
    .pipe(resize({width: 200, height: 200}))
    .pipe(gulp.dest('dist/img'))
}

function watch () {
  gulp.watch('img/*.jpg', resize)
}

Il est maintenant possible d'indiquer à la méthode src() de ne prendre que les fichiers qui sont plus récents que la date de précédente exécution de la tâche.

function resize() {
  return gulp.src('img/*.jpg', {since: gulp.lastRun('resize')})
    .pipe(resize({width: 200, height: 200}))
    .pipe(gulp.dest('dist/img'))
}

function watch () {
  gulp.watch('img/*.jpg', resize)
}