Gulp Automate and enhance your workflow

Gulp Automate and enhance your workflow

 

What is a Taskrunner?

A Task Runner is an application used to automatize different aspects of software development for projects, specially Web related ones. This tasks may include: test running, file linking, minimizing, processing or even creating a file from another one.


With this purpose, a file containing information about what it is supposed to be done is created which is the Task runner. It seems like a quite simple idea but it can actually save the developer a lot of time.

Gulp

Gulp is a kind of Task Runner. Some other kinds of Task Runners are grunt and broccoli, it is also possible to use npm in order to automatize some tasks.

Gulp is based on the use of  streams. Every operation has a stream that works as a parameter and gives back another stream. A stream is a representation of a data frequency that could be used in any time.  Each one of these can virtually have an infinite amount of elements. a very common example of a stream is the reading of a file, it doesn’t happen all at once, it’s read when needed.

This method has a strong impact on the performance and on the amount of memory needed in order to do the processing. Streams also have an interesting quality, which is that the functions that run on them can be updated in a sequent way pretty easily.     

Another difference between Gulp and other Task Runners is that Gulp is based on the use of code over configuration, so it turns out to be really easy for JavaScript developers to use it.

Besides it promotes a very particular philosophy. Gulp exposes an API that allows the development of plugins. This philosophy is based on making each plugin do only one thing and really well. Not like other Task Runners that have several plugins that do many different things.

 

Example: Minify and link JavaScript files

Start by adding to the folder that you are going to work on a package.json file that will help to add the Gulp plugins that you are going to need later on. The following commands should be written at the command console which would be located in the folder mentioned before.

npm init

First you have to install Gulp in the system (it is necessary to have nodeJS previously installed).

npm install gulp

Then, you add the following  plugins: gulp-concat and gulp-uglify.

npm install –save gulp-concat gulp-uglify

At this point it is necessary to write the gulpfile.js file that is the one in charge of defining the tasks.

var gulp = require(“gulp”);
var concat = require(“gulp-concat”);
var uglify = require(“gulp-uglify”);
const dirJSFiles = “./app/**/*.js”;
const newFileName = “dist.js”;
gulp.task(“minify”,function(){
    return gulp.src(dirJSFiles)
        .pipe(uglify())
        .pipe(concat(newFileName));
});
gulp.task(“minify:w”,function(){
    gulp.watch(dirJSFiles, [“minify”]);
});
gulp.task(“default”,[“minify”, “minify:w”]);

 

 

Here, what was done was obtaining a gulp reference, gulp-concat and gulp-uglify. Then the task necessaries are created linking the functions by using “pipe” method.
This isn’t the only thing that is possible to do at the  plugins page, there are plenty of things that can help developers solve their daily problems.

——————————————————————————————————————————————————————- 

Qué es un Taskrunner?

Un Task Runner es una aplicación utilizada para automatizar distintos aspectos del desarrollo de software en un proyecto, especialmente Web. Estas tareas pueden incluir: correr tests, concatenar archivos, minificarlos, preprocesarlos o incluso crear archivos a partir de otros.
Para esto se crea un archivo con información sobre lo que debe hacer el Task Runner. Es una idea muy sencilla pero que puede ahorrar una gran cantidad de horas al desarrollador.

Gulp

Gulp es un Task Runner. Aunque no es el único que existe. Algunos de los otros con los que coexiste son grunt broccoliAdemás también es posible utilizar npm para automatizar algunas tareas.

Gulp se basa en la utilización de streams. Esto es, todas las operaciones toman como parámetro un stream y devuelven otro stream. Un stream es una representación de una secuencia de datos que pueden utilizarse a lo largo del tiempo. A su vez, estos streams pueden tener, virtualmente, una cantidad infinita de elementos. Un ejemplo usual de streams es la lectura de un archivo. Esto no se realiza de una vez, sino que se va leyendo a medida que es necesario. Hacerlo de esta manera tiene un impacto en la performance y en la cantidad de memoria requerida para realizar el procesamiento. A su vez, los streams presentan una cualidad interesante, que es que las funciones que operan sobre ellos pueden utilizarse de manera secuencial muy fácilmente.

Otra diferencia que tiene sobre otros Task Runners es que Gulp se basa en la utilización de código sobre configuración. Por lo que puede resultar muy sencillo de utilizar para desarrolladores familiarizados con JavaScript.

Además, promueve una filosofía muy particular. Gulp expone una API que permite el desarrollo de plugins. Esta filosofía trata de hacer que cada plugin haga una sola cosa y que la haga bien. A diferencia de otros Task Runners que tienen varios plugins que hacen diversas cosas.

 

Ejemplo: Minificar y Concatenar archivos JavaScript

Se agrega a la carpeta donde se trabajará un archivo package.json que servirá para agregar los plugins de Gulp que se necesitarán. Los siguientes comandos se deben escribir en la consola de comandos estando en la carpeta antes mencionada.

npm init

Primero debe instalarse Gulp en el sistema (es necesario tener nodeJS previamente instalado).

npm install gulp

Luego, se agregan los plugins gulp-concat y gulp-uglify.

npm install –save gulp-concat gulp-uglify

Ahora es necesario escribir el archivo gulpfile.js que es el encargado de definir las tareas.

var gulp = require(“gulp”);
var concat = require(“gulp-concat”);
var uglify = require(“gulp-uglify”);
const dirJSFiles = “./app/**/*.js”;
const newFileName = “dist.js”;
gulp.task(“minify”,function(){
    return gulp.src(dirJSFiles)
        .pipe(uglify())
        .pipe(concat(newFileName));
});
gulp.task(“minify:w”,function(){
    gulp.watch(dirJSFiles, [“minify”]);
});
gulp.task(“default”,[“minify”, “minify:w”]);

 

Lo que se hizo fue obtener una referencia a gulp, gulp-concat y gulp-uglify. Luego se crean las tareas necesarias concatenando las funciones utilizando el método “pipe”.

Esto no es lo único que se puede hacer, en la página de plugins hay muchas más cosas que pueden ayudar a los desarrolladores a resolver sus problemas repetitivos

 

 

 

Share This