Gulp: un conjunto de herramientas para automatizar tareas difíciles en el desarrollo

Gulp es un pequeño conjunto de herramientas que automatiza tareas repetitivas. Esas tareas repetitivas generalmente son compilar archivos CSS, JavaScript o, básicamente, cuando usa un marco que trata con 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. él.

Gulp es útil para automatizar las siguientes tareas:

Compilando archivos JS y CSS
Actualizar la página del navegador al guardar un archivo
Ejecutar una prueba unitaria
Análisis de código
Copiar archivos modificados a un directorio de destino

Para realizar un seguimiento de todos los archivos que necesita para crear un archivo gulp, desarrollar su herramienta de automatización o automatizar tareas, debe generar un archivo package.json. Básicamente, el archivo contiene una explicación de lo que hay dentro de su proyecto y 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. Usaremos npm, que significa administrador de paquetes de nodos. Se instala con Node.js y puedes comprobar si ya has instalado Nodejs y npm con:

node --version
npm --version

Si aún no lo tiene instalado en su sistema, le recomiendo que consulte el tutorial: Instalar la última versión de Nodejs y NPM en sistemas Linux.

Cómo instalar Gulp en Linux

La 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 utilizar las instrucciones a continuación:

Cree un directorio de proyecto y navegue en él:

mkdir myproject
cd myproject

A continuación, utilice el siguiente comando para inicializar su proyecto:

npm init

Después de ejecutar el comando anterior, se le harán una serie de preguntas para darle un nombre a su proyecto, una descripción de la versión y otros. Finalmente confirma toda la información que has dado:

Ahora podemos instalar el paquete gulp en nuestro proyecto con:

npm install --save-dev gulp

La opción --save-dev le dice a npm que actualice el archivo package.json con las nuevas devDependencies.

Tenga en cuenta que las devDependencies deben resolverse 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, es necesario resolverlo en el momento del desarrollo.

Crear archivo Gulp

Ahora creemos un gulpfile. En ese archivo se encontrarán las tareas que queramos ejecutar. Se carga automáticamente cuando se utiliza el comando gulp. Usando un editor de texto, cree un archivo llamado gulpfile.js. Para los fines de este tutorial, vamos a crear una prueba sencilla.

Puede insertar el siguiente código en su gulpfile.js:

var gulp = require('gulp');

gulp.task('hello', function(done) {
        console.log('Hello world!');
        done();
});

Guarde el archivo y ahora intente ejecutarlo con:

gulp hello

Deberías ver el siguiente resultado:

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!" en la pantalla.
done();: utilizamos esta función de devolución de llamada para indicarle a Gulp que nuestras tareas han finalizado.

Por supuesto, lo anterior fue sólo una muestra para mostrar cómo se puede organizar gulpfile.js. Si desea ver las tareas disponibles desde su gulpfile.js, puede utilizar el siguiente comando:

gulp --tasks

Complementos de trago

Gulp tiene miles de complementos disponibles, y todos brindan funciones diferentes. Puede consultarlos en la página del complemento de Gulp.

A continuación usaremos el complemento minify-html en un ejemplo más práctico. Con la siguiente funció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 hacer que tu gulpfile.js se vea así:

cat gulpfile.js

Salida de muestra

// including plugins
var gulp = require('gulp')
, minifyHtml = require("gulp-minify-html");

// task
gulp.task('minify-html', function (done) {
    gulp.src('./src/*.html') // path to your files
    .pipe(minifyHtml())
    .pipe(gulp.dest('./dest'));
    done()
});

Luego puede minimizar archivos HTML usando los siguientes comandos.

gulp minify-html
du -sh /src dest/

Conclusión

Gulp es un conjunto de herramientas útil que puede ayudarle a mejorar su productividad. Si está interesado en esta herramienta, le recomiendo que consulte su página de documentación, que está disponible aquí.