Hispanopedia Wiki
Articulo de referencia

gulp.js

{{Cite book|title=Developing a Gulp Edge|publisher=Bleeding Edge Press|year=2014|isbn=978-1-939902-14-6|edition=1st|author1=Jed Mao |author2=Maximilian Schmitt |author3=Tomasz S...

Hispanopedia WikiContenido en espanolLectura gratuita

Gulp es un conjunto de herramientas JavaScript de código abierto , utilizado como un sistema de compilación en tiempo real (similar a Make , más centrado en paquetes ) en el desarrollo web front-end .

Es un ejecutor de tareas construido sobre Node.js y npm , utilizado para la automatización de tareas repetitivas y que consumen mucho tiempo involucradas en el desarrollo web, como minificación , concatenación, invalidación de caché, pruebas unitarias , análisis estático , optimización, etc. [ 6 ]

Gulp utiliza un enfoque de código sobre configuración para definir sus tareas y se basa en sus pequeños complementos de propósito único para llevarlas a cabo. El ecosistema de Gulp incluye más de 3500 de estos complementos. [ 7 ]

Descripción general

gulp [ 8 ] es una herramienta de compilación en JavaScript basada en node streams . Estos streams facilitan la conexión de operaciones de archivos a través de pipelines . [ 9 ] gulp lee el sistema de archivos y canaliza los datos disponibles de un plugin específico a otro a través del .pipe()operador, realizando una tarea a la vez. Los archivos originales no se ven afectados hasta que todos los plugins se hayan procesado. Se puede configurar para modificar los archivos originales o para crear otros nuevos. Esto permite realizar tareas complejas mediante la vinculación de sus numerosos plugins. Los usuarios también pueden escribir sus propios plugins para definir sus propias tareas. [ 10 ] A diferencia de otros gestores de tareas que ejecutan tareas por configuración, gulp requiere conocimientos de JavaScript y programación para definir sus tareas. gulp es un sistema de compilación, lo que significa que, además de ejecutar tareas, también es capaz de copiar archivos de una ubicación a otra, compilar , desplegar , crear notificaciones, realizar pruebas unitarias, analizar código, etc. [ 1 ]

Se necesita un gestor de tareas

Los gestores de tareas como gulp y Grunt están construidos sobre Node.js en lugar de npm porque los scripts básicos de npm son ineficientes al ejecutar múltiples tareas. Aunque algunos desarrolladores prefieren los scripts de npm porque pueden ser simples y fáciles de implementar, hay numerosas maneras en que gulp y Grunt parecen tener una ventaja entre sí, y sobre los scripts proporcionados por defecto. [ 11 ] Grunt ejecuta tareas transformando archivos y guardándolos como nuevos en carpetas temporales, y la salida de una tarea se toma como entrada para otra y así sucesivamente hasta que la salida llega a la carpeta de destino. Esto implica muchas llamadas de E/S y la creación de muchos archivos temporales. Mientras que gulp fluye a través del sistema de archivos no requiere ninguna de estas ubicaciones temporales, disminuyendo la cantidad de llamadas de E/S y, por lo tanto, mejorando el rendimiento. [ 12 ] Grunt usa archivos de configuración para realizar tareas, mientras que gulp requiere que su archivo de compilación esté codificado. En Grunt, cada complemento debe configurarse para que coincida con la ubicación de su entrada con la salida del complemento anterior. En Gulp, los complementos se procesan automáticamente en paralelo. [ 9 ]

Operación

Las tareas de gulp se ejecutan desde una interfaz de línea de comandos (CLI) [ 11 ] y requieren dos archivos, package.json, que se utiliza para listar los diversos complementos para gulp, y gulpfile.js(o simplemente gulpfile). Estos, según la convención de la herramienta de compilación, a menudo se encuentran en el directorio raíz del código fuente del paquete . El archivo gulpfile contiene la mayor parte de la lógica que gulp necesita para ejecutar sus tareas de compilación. Primero, se cargan todos los módulos necesarios y luego se definen las tareas en el archivo gulpfile. Todos los complementos necesarios especificados en el archivo gulpfile se listan en la sección devDependencies de package.json. [ 13 ] La tarea predeterminada se ejecuta mediante $gulp. Las tareas individuales se pueden definir mediante gulp.task y se ejecutan mediante gulp <task> <othertask>. [ 14 ] Las tareas complejas se definen encadenando los complementos con la ayuda del .pipe()operador. [ 15 ]

Anatomía de gulpfile

El archivo gulpfile es donde se definen todas las operaciones en Gulp. La anatomía básica del archivo gulpfile consiste en los complementos necesarios incluidos al principio, la definición de las tareas y una tarea predeterminada al final. [ 16 ]

Plugins

Cualquier complemento instalado que sea necesario para realizar una tarea debe agregarse en la parte superior del archivo gulpfile como una dependencia en el siguiente formato. [ 14 ] [ 15 ]

//Añadiendo dependencias var gulp = require ( 'gulp' );

Tareas

Posteriormente, se pueden crear las tareas. Una tarea de Gulp se define mediante `gulp.task` y toma como primer parámetro el nombre de la tarea y como segundo parámetro una función.

El siguiente ejemplo muestra la creación de una tarea de Gulp. El primer parámetro, taskName, es obligatorio y especifica el nombre con el que se puede ejecutar la tarea en la consola. [ 17 ]

gulp.task ( 'taskName' , function ( ) { //hacer algo } );

Como alternativa, se puede crear una tarea que realice varias funciones predefinidas. Dichas funciones se pasan como segundo parámetro en forma de matriz.

función fn1 () { // hacer algo }función fn2 () { // hacer algo }// Tarea con un array de nombres de funciones gulp . task ( 'taskName' , gulp . parallel ( fn1 , fn2 ));

Tarea predeterminada

La tarea predeterminada se define al final del archivo gulpfile. Se puede ejecutar mediante el gulpcomando en la consola. En el siguiente ejemplo, la tarea predeterminada no hace nada. [ 15 ]

// Tarea predeterminada de Gulp gulp . task ( ' default' , fn );

La tarea predeterminada se utiliza en Gulp para ejecutar automáticamente cualquier número de subtareas dependientes definidas anteriormente en orden secuencial. Gulp también puede monitorizar los archivos fuente y ejecutar la tarea apropiada cuando se realizan cambios en ellos. Las subtareas deben especificarse como elementos del array en el segundo parámetro. El proceso puede activarse simplemente ejecutando la tarea predeterminada mediante gulpun comando. [ 16 ]

Tareas de ejemplo

Tarea de imagen

La definición del módulo puede estar al principio de la Gulpfile.jssiguiente manera:

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

La siguiente tarea de procesamiento de imágenes optimiza las imágenes. gulp.src()Recupera todas las imágenes con extensión .png, .gif o .jpg en el directorio ' images-orig/'.

.pipe(imagemin())Los canales procesan las imágenes encontradas, las optimizan y .pipe(gulp.dest())las guardan en la carpeta 'images/' . Sin la gulp.dest()optimización, las imágenes se guardarían, pero no se almacenarían. [ 18 ] Dado que las imágenes optimizadas se guardan en otra carpeta, las imágenes originales permanecen inalteradas. [ 15 ]

// Tarea de imágenes gulp . task ( 'images' , function () { return gulp . src ( 'images/*.{png,gif,jpg}' ) . pipe ( imagemin ()) . pipe ( gulp . dest ( 'dist/images/' )); });

Tarea de scripts

En el siguiente ejemplo, todos los archivos JavaScript del directorio scripts/ se optimizan .pipe(uglify())y gulp.dest('scripts/')sobrescriben los archivos originales con la salida. [ 19 ] Para esto, primero se debe volver al complemento gulp-uglify requerido [ 20 ] en el instalador de paquetes npm y al principio del gulpfile , se debe definir el módulo.

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

Tarea de vigilancia

La tarea Watch sirve para reaccionar a los cambios en los archivos. En el siguiente ejemplo, las tareas con los nombres scripts e images se llaman cuando cambia alguno de los archivos JavaScript o imágenes en los directorios especificados. [ 21 ]

// Volver a ejecutar la tarea cuando un archivo cambia gulp . task ( 'watch' , function ( cb ) { gulp . watch ( 'scripts/js/**' , scripts ); gulp . watch ( 'images/**' , images ); cb (); });

Además, es posible realizar una actualización del contenido del navegador utilizando las tareas Watch. [ 22 ] Para ello, existen numerosas opciones y complementos.

Véase también

Referencias

  1. 1 2 Jed Mao; Maximilian Schmitt; Tomasz Stryjewski; Cary Country Holt; William Lubelski (2014). Developing a Gulp Edge (1.ª  ed.). Bleeding Edge Press. ISBN 978-1-939902-14-6.
  2. ↑ "Fecha de lanzamiento de la versión 1.0.0" . Consultado el 31 de diciembre de 2020 .
  3. ↑ "Versiones · gulpjs/gulp" . GitHub . Consultado el 31 de diciembre de 2020 .
  4. ↑ "Archivo LICENSE en GitHub" . GitHub . Consultado el 31/12/2020 .
  5. ↑ "Campo de licencia de gulp - npm" . Consultado el 31/12/2020 .
  6. ↑ "Construyendo con Gulp – Smashing Magazine" . Smashingmagazine.com . 11 de junio de 2014. Consultado el 14 de diciembre de 2016 .
  7. ↑ "Registro de complementos de gulp.js" . Gulpjs.com . Consultado el 14 de diciembre de 2016 .
  8. ↑ "gulpjs/gulp" . GitHub . Consultado el 22 de septiembre de 2016 .
  9. 1 2 "substack/stream-handbook: cómo escribir programas Node con flujos" . GitHub . Recuperado el 14 de diciembre de 2016 .
  10. ↑ "gulpjs/gulp" . GitHub . Consultado el 22 de septiembre de 2016 .
  11. 1 2 "gulpjs/gulp" . GitHub . Consultado el 23 de septiembre de 2016 .
  12. ↑ "Gulp para principiantes" . CSS-Tricks. 1 de septiembre de 2015. Consultado el 14 de diciembre de 2016 .
  13. ↑ "instalación | Documentación de npm" . docs.npmjs.com . Consultado el 22 de septiembre de 2016 .
  14. 1 2 "gulpjs/gulp" . GitHub . Consultado el 23 de septiembre de 2016 .
  15. 1 2 3 4 Maynard, Travis (2015). Introducción a Gulp . Packt Publishing Ltd. ISBN 9781784393472.
  16. 1 2 "Una introducción a Gulp.js - SitePoint" . 10 de febrero de 2014. Consultado el 23 de septiembre de 2016 .
  17. ↑ "gulp/API.md en 4.0 · gulpjs/gulp · GitHub" . GitHub. 12 de mayo de 2016. Consultado el 14 de diciembre de 2016 .
  18. ^ "Durchstarten mit Gulp.js: sitios web optimizados, Arbeitsabläufe automatizados" . Revista.phlow.de . 2014-05-25. Archivado desde el original el 16 de junio de 2017 . Consultado el 14 de diciembre de 2016 .
  19. ↑ "Front-end Workflow mit Gulp - Liechtenecker" . Liechtenecker.at . 2015-05-29 . Consultado el 2016-12-14 .
  20. ↑ "gulp-uglify" . Npmjs.com . Consultado el 14 de diciembre de 2016 .
  21. ↑ "gulp-watch" . Npmjs.com . Consultado el 23 de septiembre de 2016 .
  22. ↑ "Browsersync + Gulp.js" . Browsersync.io . Consultado el 14 de diciembre de 2016 .

Literatura

  • Jed Mao; Maximilian Schmitt; Tomasz Stryjewski; Cary Country Holt; William Lubelski (2014). Developing a Gulp Edge (1.ª  ed.). Bleeding Edge Press. ISBN 978-1-939902-14-6.
  • Den Odell (2014). "Herramientas de compilación y automatización". Desarrollo profesional de JavaScript: codificación, capacidades y herramientas . Apress. ISBN 978-1-4302-6268-8.
  • Maynard, Travis (2015). Introducción a Gulp . Packt Publishing Ltd. ISBN 9781784393472.
  • Sitio web oficialEdita esto en Wikidata
  • gulp en GitHub