gulp

Le système de construction en streaming

Qu'est-ce que Gulp?

• Automation - Gulp est une boîte à outils qui vous aide à automatiser des tâches douloureuses ou longues dans votre flux de travail de développement.
• Plateforme-AGNOSTIQUE - Les intégrations sont intégrées dans tous les principaux IDE et les gens utilisent Gulp avec PHP, .NET, Node.js, Java et d'autres plates-formes.
• Écosystème fort - Utilisez des modules NPM pour faire tout ce que vous voulez + plus de 3000 plugins organisés pour les transformations de fichiers en streaming.
• Simple - en ne fournissant qu'une surface API minimale, Gulp est facile à apprendre et simple à utiliser.

Installation

Suivez notre guide de démarrage rapide.

Feuille de route

Découvrez tous nos problèmes de travail en cours et en cours sur https://github.com/orgs/gulpjs/projects.

Documentation

Consultez le Guide de démarrage et les documents API sur notre site Web!

Excusez notre poussière! Tous les autres documents seront en retard jusqu'à ce que tout soit mis à jour. Veuillez ouvrir un problème si quelque chose ne fonctionne pas.

Exemple de gulpfile.js

Ce fichier vous donnera un avant-goût de ce que fait Gulp.

 var gulp = require ( 'gulp' ) ;
var less = require ( 'gulp-less' ) ;
var babel = require ( 'gulp-babel' ) ;
var concat = require ( 'gulp-concat' ) ;
var uglify = require ( 'gulp-uglify' ) ;
var rename = require ( 'gulp-rename' ) ;
var cleanCSS = require ( 'gulp-clean-css' ) ;
var del = require ( 'del' ) ;

var paths = {
  styles : {
    src : 'src/styles/**/*.less' ,
    dest : 'assets/styles/'
  } ,
  scripts : {
    src : 'src/scripts/**/*.js' ,
    dest : 'assets/scripts/'
  }
} ;

/* Not all tasks need to use streams, a gulpfile is just another node program
 * and you can use all packages available on npm, but it must return either a
 * Promise, a Stream or take a callback and call it
 */
function clean ( ) {
  // You can use multiple globbing patterns as you would with `gulp.src`,
  // for example if you are using del 2.0 or above, return its promise
  return del ( [ 'assets' ] ) ;
}

/*
 * Define our tasks using plain functions
 */
function styles ( ) {
  return gulp . src ( paths . styles . src )
    . pipe ( less ( ) )
    . pipe ( cleanCSS ( ) )
    // pass in options to the stream
    . pipe ( rename ( {
      basename : 'main' ,
      suffix : '.min'
    } ) )
    . pipe ( gulp . dest ( paths . styles . dest ) ) ;
}

function scripts ( ) {
  return gulp . src ( paths . scripts . src , { sourcemaps : true } )
    . pipe ( babel ( ) )
    . pipe ( uglify ( ) )
    . pipe ( concat ( 'main.min.js' ) )
    . pipe ( gulp . dest ( paths . scripts . dest ) ) ;
}

function watch ( ) {
  gulp . watch ( paths . scripts . src , scripts ) ;
  gulp . watch ( paths . styles . src , styles ) ;
}

/*
 * Specify if tasks run in series or parallel using `gulp.series` and `gulp.parallel`
 */
var build = gulp . series ( clean , gulp . parallel ( styles , scripts ) ) ;

/*
 * You can use CommonJS `exports` module notation to declare tasks
 */
exports . clean = clean ;
exports . styles = styles ;
exports . scripts = scripts ;
exports . watch = watch ;
exports . build = build ;
/*
 * Define default task that can be called by just running `gulp` from cli
 */
exports . default = build ; 

Utilisez la dernière version JavaScript dans votre gulpfile

Gulp fournit un wrapper qui sera chargé dans votre code ESM, vous pouvez donc nommer votre gulpfile en tant que gulpfile.mjs ou avec "type": "module" spécifié dans votre fichier package.json .

Et voici le même échantillon d'écrit dans ESNEXT .

 import { src , dest , watch } from 'gulp' ;
import less from 'gulp-less' ;
import babel from 'gulp-babel' ;
import concat from 'gulp-concat' ;
import uglify from 'gulp-uglify' ;
import rename from 'gulp-rename' ;
import cleanCSS from 'gulp-clean-css' ;
import del from 'del' ;

const paths = {
  styles : {
    src : 'src/styles/**/*.less' ,
    dest : 'assets/styles/'
  } ,
  scripts : {
    src : 'src/scripts/**/*.js' ,
    dest : 'assets/scripts/'
  }
} ;

/*
 * For small tasks you can export arrow functions
 */
export const clean = ( ) => del ( [ 'assets' ] ) ;

/*
 * You can also declare named functions and export them as tasks
 */
export function styles ( ) {
  return src ( paths . styles . src )
    . pipe ( less ( ) )
    . pipe ( cleanCSS ( ) )
    // pass in options to the stream
    . pipe ( rename ( {
      basename : 'main' ,
      suffix : '.min'
    } ) )
    . pipe ( dest ( paths . styles . dest ) ) ;
}

export function scripts ( ) {
  return src ( paths . scripts . src , { sourcemaps : true } )
    . pipe ( babel ( ) )
    . pipe ( uglify ( ) )
    . pipe ( concat ( 'main.min.js' ) )
    . pipe ( dest ( paths . scripts . dest ) ) ;
}

 /*
  * You could even use `export as` to rename exported tasks
  */
function watchFiles ( ) {
  watch ( paths . scripts . src , scripts ) ;
  watch ( paths . styles . src , styles ) ;
}
export { watchFiles as watch } ;

const build = gulp . series ( clean , gulp . parallel ( styles , scripts ) ) ;
/*
 * Export a default task
 */
export default build ; 

Construction incrémentielle

Vous pouvez filtrer les fichiers inchangés entre les exécutions d'une tâche à l'aide de la fonction gulp.src since l'option et gulp.lastRun :

 const paths = {
  ...
  images : {
    src : 'src/images/**/*.{jpg,jpeg,png}' ,
    dest : 'build/img/'
  }
}

function images ( ) {
  return gulp . src ( paths . images . src , { since : gulp . lastRun ( images ) } )
    . pipe ( imagemin ( ) )
    . pipe ( gulp . dest ( paths . images . dest ) ) ;
}

function watch ( ) {
  gulp . watch ( paths . images . src , images ) ;
}

Les temps d'exécution des tâches sont enregistrés en mémoire et sont perdus lorsque Gulp sort. Il ne fera que gagner du temps pendant la tâche watch lors de l'exécution de la tâche images pour la deuxième fois.

Vous voulez contribuer?

Tout le monde peut aider à améliorer ce projet - consultez notre guide de contribution!