gulp setup

La configuración perfecta de trago

Este proyecto tiene como objetivo crear una configuración de GULP modular y configurable. Obtenga la automatización del proyecto en funcionamiento con una participación mínima. Gulp-Setup está escrito y mantenido por @alexgozav.

 npm install gulp-cli -g
npm install gulp gulp-load-plugins gulp-setup --save-dev

Muestra gulpfile.js

Configurar Gulp usando Gulp-Setup es más simple que nunca.

 const packages = require ( 'gulp-setup/package.json' ) ;
const gulp = require ( 'gulp' ) ;
const $ = require ( 'gulp-load-plugins' ) ( { config : packages } ) ;
const setup = require ( 'gulp-setup' ) ( $ , gulp ) ; 

Tareas predeterminadas

Por defecto, Gulp-Setup viene incluido con una variedad de tareas prefabricadas.

 gulp
gulp build
gulp clean
gulp watch
gulp lint
gulp html
gulp html-lint
gulp css
gulp css-lint
gulp sass
gulp sass-lint
gulp stylus
gulp stylus-lint
gulp javascript
gulp javascript-lint
gulp coffeescript
gulp coffeescript-lint
gulp typescript
gulp typescript-lint
gulp fonts
gulp images
gulp browser-sync

trago

La tarea default ejecutará una secuencia de build , browser-sync y watch , como lo haría generalmente en Gulp.

construcción de trago

Por defecto, la tarea de compilación ejecutará la tarea clean , después de lo cual ejecuta todas las demás tareas que proporcionan un parámetro pattern .

Gulp limpio

Esta tarea eliminará las carpetas Build and Dist existentes.

Gulp Watch

La tarea watch atenderá los cambios y reconstruirá cualquier tarea que proporcione un parámetro pattern . Además de esto, gulp-setup crea un partials graph , que reconstruirá cualquier archivo que dependa del que se haya cambiado.

pelusa

Esta tarea ejecutará cualquier tarea que termine con -lint .

Gulp html

Copia los archivos .html a la carpeta de compilación, luego los minifica y los genera en Dist.

Gulp CSS

Autoprefixes .css archivos y los lleva a la carpeta de compilación, luego los minifica y los genera en DIST.

sass

Compila y autoprefixes .sass y .scss los archivos y los lleva a la carpeta de compilación, luego los minifica y los genera en Dist.

_{Esta tarea hace uso del partials graph , lo que significa que cualquier cambio en un parcial activará una reconstrucción en los archivos principales.}

lápiz lápido

Compila y autoprefixes .styl archivos y los genera a la carpeta de compilación, luego los minifica y los genera en DIST. La instancia de Stylus también proporciona funcionalidad rucksack-css .

_{Esta tarea hace uso del partials graph , lo que significa que cualquier cambio en un parcial activará una reconstrucción en los archivos principales.}

Gulp JavaScript

Compila los archivos ES6 .js y los lleva a la carpeta de compilación, luego los minifica y los genera en Dist. La tarea javascript puede usar webpack o browserify para procesar y agrupar los archivos, especificados utilizando el parámetro options.bundler (como se ve en el ejemplo de configuración a continuación).

_{Esta tarea hace uso del partials graph , lo que significa que cualquier cambio en un parcial activará una reconstrucción en los archivos principales.}

Gulp Coffeescript

Compila los archivos .coffee y los lleva a la carpeta de compilación, luego los minifica y los genera en DIST. Al igual que en la tarea javascript , puede usar webpack o browserify para agrupar los archivos.

_{Esta tarea hace uso del partials graph , lo que significa que cualquier cambio en un parcial activará una reconstrucción en los archivos principales.}

TypeScript de Gulp

Compila archivos .ts y los lleva a la carpeta de compilación, luego los minifica y los genera en Dist. Al igual que en la tarea javascript , puede usar webpack o browserify para agrupar los archivos.

_{Esta tarea hace uso del partials graph , lo que significa que cualquier cambio en un parcial activará una reconstrucción en los archivos principales.}

Gulp Images

Optimiza los archivos .svg , .jpg , .png y .gif y los lleva a las carpetas Build and Dist.

fuentes de trago

Copias .eot , .svg , .ttf , .woff y .woff2 archivos a las carpetas Build and Dist.

Configuración

Aquí hay una configuración de muestra para Gulp-Setup que establece las opciones para la tarea javascript predeterminada existente, y crea una nueva tarea Gulp llamada javascript-ext al extender la base javascript . Puede anular cualquiera de los parámetros de tarea predeterminados al extender una tarea.

La clave del objeto tasks define el nombre de la tarea GULP.

 const packages = require ( 'gulp-setup/package.json' ) ;
const gulp = require ( 'gulp' ) ;
const $ = require ( 'gulp-load-plugins' ) ( { config : packages } ) ;
const setup = require ( 'gulp-setup' ) ( $ , gulp , {
  paths : {
    src : 'path/to/src' ,
    build : 'path/to/build' ,
    dist : 'path/to/dist'
  } ,
  cache : true ,
  debug : true ,
  tasks : {
    'javascript' : {
      options : {
        bundler : 'webpack'
      }
    } ,
    'javascript-ext' : {
      extends : 'javascript' ,
      paths : {
        src : 'path/to/custom-src'
      }
    }
  }
} ) ; 

Escribir una tarea

Las tareas presentes en Gulp-Setup están hechas de dos componentes: process y base . Todos los demás parámetros, como pattern , están disponibles en estos componentes.

 const setup = require ( 'gulp-setup' ) ( $ , gulp , {
  tasks : {
    'mytask' : {
      base : './bases/base' ,
      process : './tasks/mytask' ,
      pattern : '**/*.css' ,
      paths : {
        src : 'path/to/custom-src' ,
        build : 'path/to/custom-build' ,
        dist : 'path/to/custom-dist'
      }
    }
  }
} ) ;

Tareas base

La tarea base sirve como plantilla para otras tareas. Hace que cuatro ganchos de tuberías estén disponibles: init , build , distancias y end para integrar un proceso en él. Si falta la tarea base , entonces el process se considera una tarea independiente y no usará una plantilla.

 // bases/base.js

module . exports = ( $ , gulp , config , task ) => ( ) =>
  gulp . src ( $ . path . join ( config . task . src || config . paths . src , task . pattern ) )
    . pipe ( task . process . init ( ) )     // Initialization hook
    . pipe ( $ . debug ( ) )
    . pipe ( task . process . build ( ) )    // Building hook
    . pipe ( gulp . dest ( config . task . build || config . paths . build ) )
    . pipe ( task . process . dist ( ) )     // Distribution hook
    . pipe ( gulp . dest ( config . task . dist || config . paths . dist ) )
    . pipe ( task . process . end ( ) ) ;     // Ending hook

El paquete Gulp-Setup le proporciona las siguientes bases prefabricadas: gulp-setup/bases/base , gulp-setup/bases/compile and gulp-setup/bases/lint . Puede usar estas bases para sus tareas de proceso personalizadas.

Tareas de proceso

La tarea del proceso es el procesamiento principal que se refiere a la tarea. Las tareas de proceso normalmente usan una plantilla , una tarea base con la que se integran al proporcionar ganchos init , build , dist o end . Alternativamente, puede escribir el proceso como una tarea de trago independiente .

Plantilla

 // tasks/mytask.js

module . exports = ( $ , gulp , config , task ) => ( {
  build : $ . lazypipe ( )
    . pipe ( $ . autoprefixer ) ,
  dist : $ . lazypipe ( )
    . pipe ( $ . cssmin )
} ) ;

Autónomo

 // tasks/myclean.js

module . exports = ( $ , gulp , config , task ) => {
  return ( ) => gulp . src ( [ config . paths . build , config . paths . dist ] )
    . pipe ( $ . clean ( ) ) ;
} 

Contribuciones, errores y solicitudes de funciones

¿Tiene un error o una solicitud de función? Primero lea las pautas del problema y busque problemas existentes y cerrados. Si su problema o idea aún no se aborda, abra un nuevo problema.