gulp

El sistema de construcción de transmisión

¿Qué es Gulp?

• Automation : Gulp es un kit de herramientas que lo ayuda a automatizar tareas dolorosas o que requieren mucho tiempo en su flujo de trabajo de desarrollo.
• Plataforma -Agnóstico : las integraciones están integradas en todos los IDE principales y las personas están utilizando Gulp con PHP, .NET, Node.js, Java y otras plataformas.
• Ecosistema fuerte : use módulos NPM para hacer cualquier cosa que desee + más de 3000 complementos seleccionados para transmitir transformaciones de archivos.
• Simple : al proporcionar solo una superficie API mínima, Gulp es fácil de aprender y fácil de usar.

Instalación

Sigue nuestra guía de inicio rápido.

Hoja de ruta

Conozca todos nuestros problemas de trabajo en progreso y sobresalientes en https://github.com/orgs/gulpjs/projects.

Documentación

¡Vea la Guía Getting Start y los documentos de API en nuestro sitio web!

¡Disculpe nuestro polvo! Todos los demás documentos estarán atrasados ​​hasta que nos actualicen todo. Abra un problema si algo no funciona.

Muestra gulpfile.js

Este archivo le dará una idea de lo que hace 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 ; 

Use la última versión de JavaScript en su GulpFile

Gulp proporciona un envoltorio que se cargará en su código ESM, por lo que puede nombrar su GulpFile como gulpfile.mjs o con "type": "module" especificado en su archivo package.json .

Y aquí está la misma muestra de arriba escrita en 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 ; 

Construcciones incrementales

Puede filtrar archivos sin cambios entre las ejecuciones de una tarea utilizando las funciones gulp.src since la opción y 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 ) ;
}

Los tiempos de ejecución de la tarea se guardan en la memoria y se pierden cuando Gulp sale. Solo ahorrará tiempo durante la tarea watch al ejecutar la tarea images por segunda vez.

¿Quieres contribuir?

Cualquiera puede ayudar a mejorar este proyecto: ¡consulte nuestra guía de contribución!