Gulp - Guía rápida

¿Qué es Gulp?

Gulp es un corredor de tareas que usa Node.js como plataforma. Gulp utiliza únicamente el código JavaScript y ayuda a ejecutar tareas de front-end y aplicaciones web a gran escala. Crea tareas automatizadas del sistema como la minificación de CSS y HTML, concatenando archivos de biblioteca y compilando los archivos SASS. Estas tareas se pueden ejecutar utilizando scripts de Shell o Bash en la línea de comandos.

¿Por qué utilizar Gulp?

  • Es más corto, más simple y más rápido en comparación con otro corredor de tareas.
  • Utiliza SASS y LESS como preprocesador de CSS.
  • Actualiza automáticamente la página después de editar los archivos de origen.
  • Gulpfile.js es fácil de entender y compilar porque utiliza código JavaScript puro para compilar la tarea.

Historia

Toda la documentación de Gulp está cubierta por la licencia CC0. Inicialmente, Gulp v1.0.0 se lanzó el 15 de enero de 2015 y la versión actual de Gulp esv3.9.0.

Caracteristicas

  • Proporciona minificación y concatenación.
  • Utiliza código JavaScript puro.
  • Convierte LESS o SASS en compilación CSS.
  • Gestiona la manipulación de archivos en la memoria y mejora la velocidad mediante el uso de la plataforma Node.js.

Ventajas

  • Gran ventaja de velocidad sobre cualquier otro corredor de tareas
  • Fácil de codificar y comprender.
  • Fácil de probar las aplicaciones web.
  • Los complementos son fáciles de usar y están diseñados para hacer una cosa a la vez.
  • Realiza tareas repetitivas repetidamente, como minificar hojas de estilo, comprimir imágenes, etc.

Desventajas

  • Más número de dependencias y es un recién llegado en comparación con Grunt.
  • Con los complementos de Gulp, no puede realizar varias tareas.
  • La configuración no es tan limpia como Grunt.

Este artículo proporciona un procedimiento paso a paso para la instalación de Gulp.

Requisitos del sistema para Gulp

  • Operating System - multiplataforma

  • Browser Support - IE (Internet Explorer 8+), Firefox, Google Chrome, Safari, Opera

Instalación de Gulp

Step 1- Necesitamos Node.js para ejecutar ejemplos de Gulp. Para descargar Node.js, abra elhttps://nodejs.org/en/, verá una pantalla como se muestra a continuación:

Descargue la última versión de funciones del archivo zip.

Step 2- A continuación, ejecute la configuración para instalar NodeJs en su computadora.

Step 3 - Necesita establecer variables de entorno.

Variable de usuario de ruta

  • Haga clic derecho en Mi PC.
  • Seleccione Propiedades.
  • Seleccione la pestaña Avanzado y haga clic en 'Variables de entorno'.

  • En la ventana Variables de entorno, haga doble clic en la RUTA como se muestra en la siguiente pantalla.

  • Obtendrá una ventana Editar variable de usuario como se muestra en la siguiente captura de pantalla. Agregue la ruta de la carpeta Node.js en el campo Valor de variable como C: \ Archivos de programa \ nodejs \ node_modules \ npm. Si la ruta ya está configurada para otros archivos, entonces debe poner un punto y coma (;) después de eso y agregar la ruta Node.js como se muestra en la siguiente captura de pantalla.

Al final, haga clic en el botón "Aceptar".

System Variable

  • En Variables del sistema, haga doble clic en Ruta como se muestra en la siguiente pantalla.

  • Obtendrá una ventana Editar variable del sistema como se muestra en la siguiente captura de pantalla. Agregue la ruta de la carpeta Node.js en el campo Valor de variable como C: \ Archivos de programa \ nodejs \ y haga clic en 'Aceptar' como se muestra en la siguiente captura de pantalla.

Step 4- Abra el símbolo del sistema en su sistema e ingrese el siguiente comando. Mostrará la versión instalada de Node.js.

node -v

Step 5- En el símbolo del sistema, ingrese el siguiente comando para mostrar la versión de npm (administrador de paquetes Node.js) que se usa para instalar módulos. Mostrará la versión instalada de Node.js.

npm -v

Step 6- En el símbolo del sistema, ingrese el siguiente comando para instalar Gulp. Agregar el indicador "-g" asegura que Gulp esté disponible globalmente para cualquier proyecto.

npm install gulp -g

Step 7 - Para verificar que Gulp se haya instalado correctamente, ingrese el siguiente comando para mostrar la versión de Gulp.

gulp -v

En este capítulo, se familiarizará con algunos conceptos básicos relacionados con Gulp.

¿Qué es un sistema de compilación?

Un sistema de compilación se conoce como una colección de tareas (denominada colectivamente como task runners), que automatizan el trabajo repetitivo.

A continuación se muestra una lista de algunas de las tareas que se pueden manejar con el sistema de compilación:

  • Compilación de preprocesos CSS y JavaScript.
  • Minificación de archivos para reducir su tamaño.
  • Concatenación de archivos en uno.
  • Activación del servidor para recarga automática.
  • Creación de compilaciones de implementación para almacenar los archivos resultantes en una ubicación.

En el flujo de trabajo de front-end moderno, el sistema de compilación funciona con 3 componentes:

  • Administradores de paquetes
  • Preprocessors
  • Corredores de tareas y herramientas de compilación

Gestores de paquetes

Se utiliza para automatizar la actualización de la instalación, la eliminación de las dependencias necesarias, las bibliotecas limpias y los paquetes utilizados en el entorno de desarrollo. Ejemplos de administradores de paquetes sonbower y npm.

Preprocesadores

Los preprocesadores son muy útiles para un flujo de trabajo moderno eficiente al agregar una sintaxis optimizada y características adicionales que se compilan en su idioma nativo.

Algunos de los preprocesadores más populares son:

  • CSS - SASS, LESS y Stylus.

  • JS - CoffeeScript, LiveScript, TypeScript, etc.

  • HTML - Markdown, HAML, Slim, Jade, etc.

Corredores de tareas

Los ejecutores de tareas automatizan tareas como la conversión de SASS a CSS, minimizan los archivos, optimizan las imágenes y muchas otras tareas que se utilizan en el flujo de trabajo de desarrollo. Gulp es uno de los ejecutores de tareas en el entorno de trabajo de front-end moderno y se ejecuta en Node.

Configuración de su proyecto

Para configurar su proyecto en su computadora, cree una carpeta llamada "trabajo", por ejemplo. La carpeta de trabajo contiene las siguientes subcarpetas y archivos:

  • Src - Ubicación de carpetas y archivos de origen HTML preprocesados.

    • Images - Contiene imágenes sin comprimir.

    • Scripts - Contiene varios archivos de script preprocesados.

    • Styles - Contiene varios archivos CSS preprocesados.

  • Build - Esta carpeta se creará automáticamente que contiene los archivos de producción.

    • Images - Contiene imágenes comprimidas.

    • Scripts - Archivo de script único que contiene códigos minimizados.

    • Styles - Archivo CSS único que contiene códigos minimizados.

  • gulpfile.js - Es el archivo de configuración, que se utiliza para definir nuestras tareas.

En los capítulos anteriores, ha estudiado sobre la instalación de Gulp y los conceptos básicos de Gulp, que incluyen el sistema de compilación de Gulp, el administrador de paquetes, el ejecutor de tareas, la estructura de Gulp, etc.

En este capítulo, veremos los conceptos básicos para desarrollar una aplicación, que incluye lo siguiente:

  • Declarar dependencias requeridas
  • Creando tarea para las dependencias
  • Ejecutando la tarea
  • Mirando la tarea

Declaración de dependencias

Cuando instala complementos para la aplicación, debe especificar las dependencias para los complementos. Las dependencias son manejadas por el administrador de paquetes como bower y npm.

Tomemos un complemento llamado gulp-imageminpara definir dependencias para él en el archivo de configuración. Este complemento se puede usar para comprimir el archivo de imagen y se puede instalar usando la siguiente línea de comando:

npm install gulp-imagemin --save-dev

Puede agregar dependencias a su archivo de configuración como se muestra en el siguiente código.

var imagemin = require('gulp-imagemin');

La línea anterior incluye el complemento y se incluye como un objeto llamado imagemin.

Creación de tareas para dependencias

Task permite un enfoque modular para configurar Gulp. Necesitamos crear una tarea para cada dependencia, que iríamos sumando a medida que encontramos e instalamos otros complementos. La tarea Gulp tendrá la siguiente estructura:

gulp.task('task-name', function() {
   //do stuff here
});

Donde 'nombre-tarea' es un nombre de cadena y 'función ()' realiza su tarea. El 'gulp.task' registra la función como una tarea dentro del nombre y especifica las dependencias de otras tareas.

Puede crear la tarea para la dependencia definida anteriormente como se muestra en el siguiente código.

gulp.task('imagemin', function() {
   var img_src = 'src/images/**/*', img_dest = 'build/images';

   gulp.src(img_src)
   .pipe(changed(img_dest))
   .pipe(imagemin())
   .pipe(gulp.dest(img_dest));
});

Las imágenes se encuentran en src/images/**/*que se guarda en el img_srcobject. Se canaliza a otra función creada por el constructor imagemin. Comprime las imágenes de la carpeta src y las copia en la carpeta de compilación llamandodest método con un argumento, que representa el directorio de destino.

Ejecutando la tarea

El archivo Gulp está configurado y listo para ejecutarse. Use el siguiente comando en el directorio de su proyecto para ejecutar la tarea:

gulp imagemin

Al ejecutar la tarea usando el comando anterior, verá el siguiente resultado en el símbolo del sistema:

C:\work>gulp imagemin
[16:59:09] Using gulpfile C:\work\gulpfile.js
[16:59:09] Starting 'imagemin'...
[16:59:09] Finished 'imagemin' after 19 ms
[16:59:09] gulp-imagemin: Minified 2 images (saved 80.81 kB - 16.9%)

Task permite un enfoque modular para configurar Gulp. Necesitamos crear una tarea para cada dependencia, que sumaríamos a medida que encontremos e instalemos otros complementos. La tarea Gulp tendrá la siguiente estructura:

gulp.task('task-name', function() {
   //do stuff here
});

Donde "nombre-tarea" es un nombre de cadena y "función ()" realiza su tarea. El "gulp.task" registra la función como una tarea dentro del nombre y especifica las dependencias de otras tareas.

Instalación de complementos

Tomemos un complemento llamado minify-csspara fusionar y minimizar todos los scripts CSS. Se puede instalar usando npm como se muestra en el siguiente comando:

npm install gulp-minify-css --save-dev

Para trabajar con "gulp-minify-css plugin", necesita instalar otro plugin llamado "gulp-autoprefixer" como se muestra en el siguiente comando:

npm install gulp-autoprefixer --save-dev

Para concatenar los archivos CSS, instale gulp-concat como se muestra en el siguiente comando:

npm install gulp-concat --save-dev

Después de la instalación de los complementos, debe escribir las dependencias en su archivo de configuración de la siguiente manera:

var autoprefix = require('gulp-autoprefixer');
var minifyCSS = require('gulp-minify-css');
var concat = require('gulp-concat');

Agregar tarea al archivo Gulp

Necesitamos crear una tarea para cada dependencia, que sumaríamos a medida que instalamos los complementos. La tarea Gulp tendrá la siguiente estructura:

gulp.task('styles', function() {
   gulp.src(['src/styles/*.css'])
   .pipe(concat('styles.css'))
   .pipe(autoprefix('last 2 versions'))
   .pipe(minifyCSS())
   .pipe(gulp.dest('build/styles/'));
});

El complemento 'concat' concatena los archivos CSS y el complemento 'autoprefix' indica las versiones actual y anterior de todos los navegadores. Minimiza todos los scripts CSS de la carpeta src y los copia a la carpeta de compilación llamando al método 'dest' con un argumento, que representa el directorio de destino.

Para ejecutar la tarea, use el siguiente comando en el directorio de su proyecto:

gulp styles

De manera similar, usaremos otro complemento llamado 'gulp-imagemin' para comprimir el archivo de imagen, que se puede instalar usando el siguiente comando:

npm install gulp-imagemin --save-dev

Puede agregar dependencias a su archivo de configuración usando el siguiente comando:

var imagemin = require('gulp-imagemin');

Puede crear la tarea para la dependencia definida anteriormente como se muestra en el siguiente código.

gulp.task('imagemin', function() {
   var img_src = 'src/images/**/*', img_dest = 'build/images';
   
   gulp.src(img_src)
   .pipe(changed(img_dest))
   .pipe(imagemin())
   .pipe(gulp.dest(img_dest));
});

Las imágenes se encuentran en “src / images / ** / *” que se guardan en el img_srcobject. Se canaliza a otras funciones creadas por el constructor 'imagemin'. Comprime las imágenes de la carpeta src y las copia en la carpeta de compilación llamando al método 'dest' con un argumento, que representa el directorio de destino.

Para ejecutar la tarea, use el siguiente comando en el directorio de su proyecto:

gulp imagemin

Combinar varias tareas

Puede ejecutar varias tareas a la vez creando una tarea predeterminada en el archivo de configuración como se muestra en el siguiente código:

gulp.task('default', ['imagemin', 'styles'], function() {

});

El archivo Gulp está configurado y listo para ejecutarse. Ejecute el siguiente comando en el directorio de su proyecto para ejecutar las tareas combinadas anteriores:

gulp

Al ejecutar la tarea con el comando anterior, obtendrá el siguiente resultado en el símbolo del sistema:

C:\work>gulp
[16:08:51] Using gulpfile C:\work\gulpfile.js
[16:08:51] Starting 'imagemin'...
[16:08:51] Finished 'imagemin' after 20 ms
[16:08:51] Starting 'styles'...
[16:08:51] Finished 'styles' after 13 ms
[16:08:51] Starting 'default'...
[16:08:51] Finished 'default' after 6.13 ms
[16:08:51] gulp-imagemin: Minified 0 images

El método Watch se usa para monitorear sus archivos fuente. Cuando se realizan cambios en el archivo de origen, el reloj ejecutará una tarea adecuada. Puede utilizar la tarea "predeterminada" para observar los cambios en los archivos HTML, CSS y JavaScript.

Actualizar tarea predeterminada

En el capítulo anterior, aprendió cómo tragar la combinación de tareas usando la tarea predeterminada. Usamos gulp-minify-css, gulp-autoprefixer y gulp-concatplugins, y creamos la tarea de estilos para minimizar los archivos CSS.

Para ver el archivo CSS, necesitamos actualizar la tarea 'predeterminada' como se muestra en el siguiente código:

gulp.task('default', ['styles'], function() {
   // watch for CSS changes
   gulp.watch('src/styles/*.css', function() {
      // run styles upon changes
      gulp.run('styles');
   });
});

Todos los archivos CSS debajo work/src/styles/ Se supervisará la carpeta y si se realizan cambios en estos archivos, se ejecutará la tarea de estilos.

Ejecutar tarea predeterminada

Ejecute la tarea 'predeterminada' con el siguiente comando.

gulp

Después de ejecutar el comando anterior, recibirá el siguiente resultado.

C:\work>gulp
[17:11:28] Using gulpfile C:\work\gulpfile.js
[17:11:28] Starting 'styles'...
[17:11:28] Finished 'styles' after 22 ms
[17:11:28] Starting 'default'...
[17:11:28] Finished 'default' after 21 ms

Siempre que se realicen cambios en los archivos CSS, recibirá el siguiente resultado.

C:\work>gulp
[17:11:28] Using gulpfile C:\work\gulpfile.js
[17:11:28] Starting 'styles'...
[17:11:28] Finished 'styles' after 22 ms
[17:11:28] Starting 'default'...
[17:11:28] Finished 'default' after 21 ms
gulp.run() has been deprecated. Use task dependencies or gulp.watch task 
   triggering instead.
[17:18:46] Starting 'styles'...
[17:18:46] Finished 'styles' after 5.1 ms

El proceso Watch permanecerá activo y responderá a sus cambios. Puedes presionarCtrl+Cpara terminar el proceso de monitoreo y regresar a la línea de comando.

Live Reload especifica los cambios en el sistema de archivos. BrowserSyncse utiliza para ver todos los archivos HTML y CSS en el directorio CSS y realizar una recarga en vivo de la página en todos los navegadores, siempre que se modifiquen los archivos. BrowserSync acelera el flujo de trabajo al sincronizar URL, interacciones y cambios de código en varios dispositivos.

Instalación del complemento BrowserSync

El complemento BrowserSync proporciona inyección de CSS entre navegadores y se puede instalar con el siguiente comando.

npm install browser-sync --save-dev

Configuración del complemento BrowserSync

Para usar el complemento BrowserSync, debe escribir la dependencia en su archivo de configuración como se muestra en el siguiente comando.

var browserSync = require('browser-sync').create();

Necesita crear una tarea para que BrowserSync funcione con el servidor usando Gulp. Dado que está ejecutando el servidor, debe llamar a BrowserSync sobre la raíz de su servidor. Aquí, estamos usando el directorio base como 'compilación'.

gulp.task('browserSync', function() {
   browserSync.init({
      server: {
         baseDir: 'build'
      },
   })
})

También puede inyectar nuevos estilos en el navegador utilizando la siguiente tarea para el archivo CSS.

gulp.task('styles', function() {
   
   gulp.src(['src/styles/*.css'])
   .pipe(concat('style.css'))
   .pipe(autoprefix('last 2 versions'))
   .pipe(minifyCSS())
   .pipe(gulp.dest('build/styles/'))
   .pipe(browserSync.reload({
      stream: true
   }))
});

Antes de crear una tarea para BrowserSync, debe instalar los complementos usando el administrador de paquetes y escribir las dependencias en su archivo de configuración como se define en este capítulo .

Cuando haya terminado con la configuración, ejecute BrowserSync y watchTask para que ocurra el efecto de recarga en vivo. En lugar de ejecutar dos líneas de comando por separado, las ejecutaremos juntas agregando browserSynctask junto con watchTask como se muestra en el siguiente código.

gulp.task('default', ['browserSync', 'styles'], function (){
   gulp.watch('src/styles/*.css', ['styles']);
});

Ejecute el siguiente comando en el directorio de su proyecto para ejecutar las tareas combinadas anteriores.

gulp

Después de ejecutar la tarea con el comando anterior, obtendrá el siguiente resultado en el símbolo del sistema.

C:\project>gulp
[13:01:39] Using gulpfile C:\project\gulpfile.js
[13:01:39] Starting 'browserSync'...
[13:01:39] Finished 'browserSync' after 20 ms
[13:01:39] Starting 'styles'...
[13:01:39] Finished 'styles' after 21 ms
[13:01:39] Starting 'default'...
[13:01:39] Finished 'default' after 15 ms
[BS] 1 file changed (style.css)
[BS] Access URLs:
 ------------------------------------
       Local: http://localhost:3000
    External: http://192.168.1.4:3000
 ------------------------------------
          UI: http://localhost:3001
 UI External: http://192.168.1.4:3001
 ------------------------------------
[BS] Serving files from: build

Abrirá la ventana del navegador con la URL. http://localhost:3000/. Cualquier cambio realizado en el archivo CSS se reflejará en el símbolo del sistema y el navegador se recargará automáticamente con los estilos modificados.

En este capítulo, aprenderá a optimizar CSS y JavaScript. Se requiere optimización para eliminar datos innecesarios (por ejemplo, espacios y caracteres no utilizados) de los archivos de origen. Reduce el tamaño de los archivos y les permite cargar más rápido

Instale complementos para optimizar CSS y JavaScript

Vaya al directorio "trabajo" desde su línea de comando e instale los complementos "gulp-uglify", "gulp-minify-css" y "gulp-concat" usando el siguiente comando:

npm install gulp-uglify gulp-minify-css gulp-concat

Declarar dependencias y crear tareas

En su archivo de configuración gulpfile.js, primero declare las dependencias como se muestra en el siguiente código.

var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var minify = require('gulp-minify-css');

A continuación, debe crear tareas para optimizar CSS y JavaScript como se muestra en el siguiente código.

gulp.task('js', function(){
   gulp.src('src/scripts/*.js')
   .pipe(concat('script.js'))
   .pipe(uglify())
   .pipe(gulp.dest('build/scripts/'));
});

gulp.task('css', function(){
   gulp.src('src/styles/*.css')
   .pipe(concat('styles.css'))
   .pipe(minify())
   .pipe(gulp.dest('build/styles/'));
});

gulp.task('default',['js','css'],function(){
});

los js la tarea acepta .js archivos de src/scripts/carpeta. Concatena y fealiza eljs archivos, luego produce build/scripts/script.js archivo.

los CSS la tarea aceptará .css archivos de src/styles/carpeta. Concatena y minificaCSS archivos, luego produce build/styles/styles.css archivo.

Ejecutar las tareas

El archivo de configuración está configurado y listo para ejecutarse. Utilice el siguiente comando para ejecutar la tarea.

gulp

Al ejecutar la tarea con el comando anterior, recibirá el siguiente resultado en el símbolo del sistema.

C:\work>gulp
[13:16:34] Using gulpfile C:\work\gulpfile.js
[13:16:34] Starting 'js'...
[13:16:34] Finished 'js' after 24 ms
[13:16:34] Starting 'css'...
[13:16:34] Finished 'css' after 6.05 ms
[13:16:34] Starting 'default'...
[13:16:34] Finished 'default' after 5.04 μs

En este capítulo, aprenderá a optimizar imágenes. La optimización reducirá el tamaño de las imágenes y ayudará a una carga más rápida.

Instalar complementos para optimizar imágenes

Vaya al directorio "trabajo" desde su línea de comandos e instale los complementos "gulp-modified" y "gulp-imagemin" utilizando los siguientes comandos.

npm install gulp-changed --save-dev
npm install gulp-imagemin --save-dev

Declarar dependencias y crear tareas

En su archivo de configuración gulpfile.js, primero declare las dependencias como se muestra en el siguiente comando.

var gulp = require('gulp');
var changed = require('gulp-changed');
var imagemin = require('gulp-imagemin');

A continuación, debe crear tareas para optimizar imágenes como se muestra en el siguiente código.

gulp.task('imagemin', function() {
   var imgSrc = 'src/images/*.+(png|jpg|gif)',
   imgDst = 'build/images';
   
   gulp.src(imgSrc)
   .pipe(changed(imgDst))
   .pipe(imagemin())
   .pipe(gulp.dest(imgDst));
});

gulp.task('default',['imagemin'],function(){
});

los imageminLa tarea aceptará imágenes png, jpg y gif de la carpeta src / images / y las minimizará antes de escribirlas en el destino. loschanged()asegura que solo los nuevos archivos se pasen cada vez para minificar. El complemento gulp- modified solo procesará los nuevos archivos y, por lo tanto, utilizará un tiempo precioso.

Ejecutar las tareas

El archivo de configuración está configurado y listo para ejecutarse. Utilice el siguiente comando para ejecutar la tarea.

gulp

Al ejecutar la tarea con el comando anterior, recibirá el siguiente resultado en el símbolo del sistema.

C:\work>gulp
[15:55:49] Using gulpfile C:\work\gulpfile.js
[15:55:49] Starting 'imagemin'...
[15:55:49] Finished 'imagemin' after 23 ms
[15:55:49] Starting 'default'...
[15:55:49] Finished 'default' after 23 μs
[15:55:54] gulp-imagemin: Minified 1 images (saved 558.3 kB - 8.3%)

Gulp proporciona algunos complementos útiles para trabajar con HTML y CSS, JavaScript, gráficos y algunas otras cosas, como se describe en las siguientes tablas.

Complementos HTML y CSS

No Señor. Complemento y descripción
1 autoprefixer

Incluye automáticamente prefijos a las propiedades CSS.
2 gulp-browser-sync

Se utiliza para ver todos los archivos HTML y CSS en el directorio CSS y realiza la recarga en vivo de la página en todos los navegadores, siempre que se modifiquen los archivos.
3 gulp-useref

Se utiliza para reemplazar referencias a scripts u hojas de estilo no optimizados.
4 gulp-email-design

Crea plantillas de correo electrónico HTML que convierten los estilos CSS a inline.
5 gulp-uncss

Optimiza los archivos CSS y encuentra estilos duplicados y no utilizados.
6 gulp-csso

Es un optimizador de CSS, que minimiza los archivos CSS, lo que resulta en un tamaño de archivo más pequeño.
7 gulp-htmlmin

Minimiza los archivos HTML.
8 gulp-csscomb

Se utiliza para crear un formateador de estilo para CSS.
9 gulp-csslint

Especifica un linter CSS.
10 gulp-htmlhint

Especifica un validador de HTML.

Complementos de JavaScript

No Señor. Complemento y descripción
1 gulp-autopolyfiller

Es lo mismo que el autoprefixer que incluye los polyfills necesarios para JavaScript.
2 gulp-jsfmt

Se utiliza para buscar fragmentos de código específicos.
3 gulp-jscs

Se utiliza para comprobar el estilo del código JavaScript.
4 gulp-modernizr

Especifica qué características HTML, CSS y JavaScript tiene para ofrecer el navegador del usuario.
5 gulp-express

Inicia el servidor web gulp express.js.
6 gulp-requirejs

Utiliza require.js para combinar los módulos de AMD require.js en un archivo.
7 gulp-plato

Genera informes de análisis de complejidad.
8 gulp-complexity

Analiza la complejidad y la capacidad de mantenimiento del código.
9 fixmyjs

Corrige los resultados de JSHint.
10 gulp-jscpd

Se utiliza como detector de copiar / pegar para el código fuente.
11 gulp-jsonlint

Es un validador JSON.
12 gulp-uglify

Minifica los archivos JavaScript.
13 gulp-concat

Concatena los archivos CSS.

Complementos de pruebas unitarias

No Señor. Complemento y descripción
1 gulp-nodeunit

Ejecuta pruebas unitarias de nodos de Gulp.
2 gulp-jasmine

Se utiliza para informar los problemas relacionados con la salida.
3 gulp-qunit

Proporciona una salida de consola básica para las pruebas QUnit y utiliza el módulo de nodo PhantomJS y el complemento QUnit del corredor PhantomJS.
4 gulp-mocha

Especifica la envoltura delgada alrededor de Mocha y ejecuta las pruebas de Mocha.
5 gulp-karma

Ha quedado obsoleto en Gulp.

Complementos de gráficos

No Señor. Complemento y descripción
1 gulpicon

Genera sprites a partir de SVG y los convierte a PNG.
2 gulp-iconfont

Se utiliza con fuentes web para crear archivos WOFF, EOT, TTF a partir de SVG.
3 gulp-imacss

Transforma archivos de imagen en URI de datos y los coloca en un solo archivo CSS.
4 gulp-responsive

Genera imágenes receptivas para diferentes dispositivos.
5 gulp-sharp

Se utiliza para cambiar y redimensionar la orientación y el fondo de la imagen.
6 gulp-svgstore

Combina archivos SVG en uno con elementos <symbol>.
7 gulp-imagemin & gulp-tinypng

Se utiliza para comprimir imágenes como PNG, JPEG, GIF, SVG.
8 gulp-spritesmith

Se utiliza para crear una hoja de sprites a partir de un conjunto de imágenes y variables CSS.

Complementos de compiladores

No Señor. Complemento y descripción
1 gulp-less

Proporciona un complemento MENOS para Gulp.
2 gulp-sass

Proporciona el complemento SASS para Gulp.
3 gulp-compass

Proporciona un complemento de brújula para Gulp.
4 gulp-stylus

Se utiliza para mantener el lápiz óptico en CSS.
5 gulp-coffee

Proporciona el complemento coffeescript para Gulp.
6 gulp-handlebars

Proporciona un complemento de manillar para Gulp.
7 gulp-jst

Proporciona plantillas de subrayado en JST.
8 gulp-react

Especifica las plantillas de Facebook React JSX en JavaScript.
9 gulp-nunjucks

Especifica plantillas Nunjucks en JST.
10 gulp-dustjs

Especifica plantillas de polvo en JST.
11 gulp-angular-templatecache

Especifica las plantillas AngularJS en templateCache.

Otros complementos

El complemento gulp-clean elimina archivos y carpetas y el complemento gulp-copy copia los archivos del origen al nuevo destino.

No Señor. Complemento y descripción
1 gulp-grunt

Ejecuta las tareas de Grunt de Gulp
2 gulp-watch

Observa los archivos siempre que se realizan cambios.
3 gulp-notify

Notifica el mensaje de error cada vez que falla una tarea.
4 gulp-git

Permite usar comandos de Git.
5 gulp-jsdoc

Crea documentación JavaScript para Gulp.
6 gulp-rev

Proporciona revisión de activos estáticos a los nombres de los archivos.
7 gulp-bump

Aumenta las versiones en paquete JSON.
8 gulp-bower-files

Se utiliza para inyectar paquetes Bower.
9 gulp-removelogs

Elimina las declaraciones de console.log.
10 gulp-preprocess

Preprocesa HTML, JavaScript y otros archivos en función del contexto o la configuración del entorno.
11 gulp-duration

Especifica la duración de las tareas de Gulp.
12 gulp-changed & gulp-newer

Ejecuta los archivos modificados y los archivos más nuevos.
13 gulp-connect

Se utiliza para ejecutar un servidor web con LiveReload.
14 gulp-shell

Ejecuta comandos de Shell.
15 gulp-ssh

Se conecta mediante tareas SSH y SFTP.
dieciséis gulp-zip

Comprime los archivos y carpetas.
17 gulp-clean y gulp-copy
18 gulp-filesize

Especifica el tamaño del archivo en formato legible por humanos.
19 gulp-util

Proporciona utilidades para complementos de gulp.

En este capítulo, aprenderá a limpiar archivos generados. Como estamos generando automáticamente los archivos, asegúrese de eliminar los archivos innecesarios antes de ejecutar su compilación. Este procedimiento se llamacleaning. losdel El complemento se puede utilizar para este propósito.

Instalando del Plugins

En su línea de comando, instale el complemento ingresando el siguiente comando.

npm install del --save-dev

Declarar dependencias y crear tareas

En su archivo de configuración gulpfile.js, declare las dependencias como se muestra en el siguiente comando.

var del = require('del');

A continuación, cree una tarea como se muestra en el siguiente código.

gulp.task('clean:build', function() {
   return del.sync('build');
});

La tarea anterior limpiará toda la construcción. La tarea de limpieza borra cualquier captura de imagen y elimina los archivos antiguos presentes en la compilación.

Es posible limpiar solo archivos o carpetas específicos y dejar algunos de ellos intactos como se ilustra en el siguiente código.

gulp.task('clean:build', function() {
   //return del.sync('build');
   return del([
      'build/temp/',
      // instructs to clean temp folder
      '!build/package.json'
      // negate to instruct not to clean package.json file ]);
});

En la tarea anterior, solo el temp la carpeta se limpiará dejando package.json intacto.