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 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. eso.

Gulp es útil para automatizar las siguientes tareas:

  • Compilar archivos JS y CSS
  • Actualizar la página del navegador cuando guarda un archivo
  • Ejecute 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, 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. Está instalado con Node.js, y puede verificar si ya ha 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: Instale 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 usar las instrucciones a continuación:

Cree un directorio de proyecto y navegue en él:

# mkdir myproject
# cd myproject

A continuación, use 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 a su proyecto un nombre, descripción de la versión y otros. Finalmente confirme toda la información que ha proporcionado:

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 dependencias 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, debe resolverse en el momento del desarrollo.

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, crearemos una prueba simple.

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ía ver el siguiente resultado:

Esto es lo que hace el código anterior:

  • var gulp u003d require ('gulp'); - importa el módulo gulp.
  • gulp.task ("hola", función (hecho) {: define una tarea que estará disponible desde la línea de comandos.
  • console.log ("¡Hola, mundo!"); - simplemente imprime "¡Hellow world!" a la pantalla.
  • hecho(); - 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 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

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

Puede hacer que su archivo gulpfile.js se vea así:

# cat gulpfile.js
// 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 los archivos HTML usando los siguientes comandos.

# gulp minify-html
# du -sh /src dest/

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í.