Gulp. es un pequeño conjunto de herramientas que automatiza tareas repetitivas. Esas tareas repetitivas generalmente compilan CSS, archivos JavaScript o, básicamente, cuando usa un marco que se ocupa de archivos JavaScript/CSS no estándar, querrá usar una herramienta de automatización que tome esos archivos, los empaquete y compile todo para que su navegador pueda entenderlos fácilmente.
Gulp. es útil para automatizar las siguientes tareas:
- Compilar archivos JS y CSS
- Actualizar la página del navegador cuando guarda un archivo
- Ejecutar una prueba unitaria
- Análisis de código
- Copiar archivos modificados en un directorio de destino
Para Realice un seguimiento de todos los archivos que necesita para crear un archivo gulp, desarrollar su herramienta de automatización o automatizar tareas, necesita generar un archivo package.json. Básicamente, el archivo contiene una explicación de lo que hay dentro de su proyecto, qué dependencias necesita para que su proyecto funcione.
En este tutorial, aprenderá cómo instalar Gulp y cómo automatizar algunas tareas básicas para sus proyectos. Vamos a utilizar npm, que significa administrador de paquetes de nodos. Se instala con Node.js. y puede verificar si ya instaló Nodejs y npm con:
# node–version
# npm–version 
Verifique la versión de NodeJS y NPM
Si aún no lo tiene instalado en su sistema, le recomiendo para consultar el tutorial: Instale la última versión de Nodejs y NPM en sistemas Linux.
Cómo instalar Gulp en Linux
freestar.config.enabled_slots.push
Instalación de gulp-cli. se puede completar con npm. usando el siguiente comando.
# npm install–global gulp-cli
Si desea instalar el módulo gulp. localmente (solo para el proyecto actual), puede usar las instrucciones a continuación:
Cree un directorio de proyecto y navegue en él:
# mkdir myproject # cd myproject
Luego, use el siguiente comando para inicializar su proyecto:
# npm init
Después de ejecutar el comando anterior, se le pedirá una serie de preguntas para darle a su proyecto un nombre, descripción de la versión y otras. Finalmente confirme toda la información que ha proporcionado:
Inicializar proyecto NPM
Ahora podemos instalar el paquete gulp. en nuestro proyecto con:
# npm install–save-dev gulp
La opción–save-dev le dice a npm. para actualizar el archivo package.json. con las nuevas devDependencies.
Tenga en cuenta que las devDependencies. deben ser resuelto durante el desarrollo, mientras que las dependencias durante el tiempo de ejecución. Dado que gulp es una herramienta que nos ayuda en el desarrollo, debe resolverse en el momento del desarrollo.
Crear archivo Gulp
Ahora creemos un archivo gulp. Las tareas que queremos ejecutar se encontrarán en ese archivo. Se carga automáticamente cuando se usa el comando gulp. Con un editor de texto, cree un archivo llamado gulpfile.js. Para el propósito de este tutorial, vamos a crear una prueba simple.
Puede insertar el siguiente código en su gulpfile.js.
var gulp = require (‘trago’); gulp.task (‘hola’, función (hecho) console.log (‘¡Hola mundo!’); hecho (););
Guarde el archivo y ahora intente ejecutarlo con:
# gulp hello
Debería ver el siguiente resultado:
Ejecutar proyecto Gulp
Esto es lo que hace el código anterior:
- var gulp = require (‘gulp’);. importa el módulo gulp.
- gulp.task (‘hola’, función (hecho) {-define una tarea que estará disponible desde la línea de comando.
- console.log (‘¡Hola mundo!’);. simplemente imprime “ ¡Hola mundo!. ”a la pantalla.
- done ();. usamos esta función de devolución de llamada para indicar a gulp que nuestras tareas han finalizado.
Por supuesto, lo anterior fue solo una muestra e para mostrar cómo se puede organizar gulpfile.js. Si desea ver las tareas disponibles en su gulpfile.js. puede usar el siguiente comando:
# gulp–tasks 
Lista de tareas de Gulp Complementos de Gulp
Gulp. tiene miles de complementos disponibles, todos con diferentes funcionalidades. Puede consultarlos en la página de complementos de Gulp.
A continuación, usaremos el complemento minify-html. en un ejemplo más práctico. Con la función a continuación, puede minimizar archivos HTML y colocarlos en un nuevo directorio. Pero primero, instalaremos el complemento gulp-minify-html.
# npm install–save-dev gulp-minify-html
Puedes crear tu gulpfile. js. tiene este aspecto:
# cat gulpfile.js Salida de muestra//incluidos los complementos var gulp = require (‘gulp’), minifyHtml = require (“gulp-minify-html”);//tarea gulp.task (‘minify-html’, function (hecho) gulp.src (‘./src/*. html’)//ruta a sus archivos .pipe (minifyHtml ()) .pipe (gulp. dest (‘./dest’)); hecho ());
Luego puede minimizar los archivos HTML usando los siguientes comandos.
# gulp minify-html # du-sh/src dest/ 
Conclusión de Minify HTML Files
Gulp. es un conjunto de herramientas útil que puede ayudarlo a mejorar su productividad. Si está interesado en esta herramienta, le recomiendo que consulte su página de documentación, que está disponible aquí.
