Gulp - Un kit de herramientas para automatizar tareas dolorosas en el desarrollo


Gulp es un pequeño kit de herramientas que automatiza las tareas repetitivas. Esas tareas repetitivas suelen ser la compilación de 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 capture esos archivos, los agrupe y compile todo para que su navegador pueda entenderlo fácilmente eso.

Gulp es útil para automatizar las siguientes tareas:

  • Compiling JS and CSS files
  • Refreshing browser page when you save a file
  • Run a unit test
  • Code analysis
  • Copying modified files to a target directory

Para realizar un seguimiento de todos los archivos que necesita para crear un archivo truculento, 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 está 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 gestor de paquetes de nodo. Se instala 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 gulp module localmente (solo para el proyecto actual), puede usar las instrucciones a continuación:

Crea un directorio de proyectos y navega 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á una serie de preguntas para darle un nombre, descripción de la versión y otros a su proyecto. Finalmente confirme toda la información que ha 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 los nuevos devDependencies .

Tenga en cuenta que 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 vamos a crear un gulpfile . Las tareas que queremos ejecutar se encontrarán en ese archivo. Se carga automáticamente cuando se usa el comando trago . 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('gulp');

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

Guarda el archivo y ahora intenta ejecutarlo con:

# gulp hello

Deberías ver el siguiente resultado:

Esto es lo que hace el código anterior:

  • var gulp = require(‘gulp’); – imports the gulp module.
  • gulp.task(‘hello’, function(done) { – defines a task that will be available from the command line.
  • console.log(‘Hello world!’); – simply prints “Hellow world!” to the screen.
  • done(); – we use this callback function to instruct gulp that our tasks has finished.

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

# gulp --tasks

Gulp tiene miles de complementos disponibles, todos con diferentes funcionalidades. Puedes consultarlos en la página del plugin de Gulp.

A continuación, utilizaremos el complemento minify-html en un ejemplo más práctico. Con la siguiente función, puede minimizar los 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
// 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 puedes minimizar los archivos HTML usando los siguientes comandos.

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

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