Automação de tarefas com Gulp

Gulp é um automatizador de tarefas que roda sobre Node.js. Dentre as tarefas que podem ser automatizadas utilizando o Gulp estão: compilação de CSS pré-processado, minificação e concatenação de Javascript, reinicialização do servidor, entre outras. Estas tarefas podem ser executadas automaticamente pelo Gulp à medida que certos arquivos são alterados (gulp.watch).

Para auxiliar, o Gulp possui uma vasta gama de plugins (mais de 2000!) para as mais diversas tarefas.

Neste post pretendo mostrar algumas tarefas que podem ser automatizadas com o Gulp utilizando como base o tutorial sobre MEAN que escrevi aqui no blog.

Primeiramente devemos instalar o Gulp de forma global:
npm install gulp -g

Além do Gulp, vamos utilizar os seguintes plugins: gulp-concat (para juntar os arquivos javascript em um único arquivo) e gulp-uglify (para minificação do javascript).

Vamos instalá-los como dependências de desenvolvimento. Abra o terminal, e na pasta raiz do projeto, digite:
npm install gulp gulp-uglify gulp-concat --save-dev

Agora vamos refatorar nosso arquivo /public/javascripts/app.js, da aplicação Angular, separando as funcionalidades deste arquivo nos seguintes arquivos: module.js, config,js, services.js, controllers.js, filters.js e directives.js. Apesar de estarmos fazendo isto para demonstração da concatenação e minificação dos arquivos em um único arquivo, a modularização da aplicação em diversos arquivos separados por responsabilidade é uma boa prática que deve ser seguida, principalmente em aplicações grandes, para uma melhor manutenção do código.

O próximo passo é a criação do arquivo gulpfile.js que é onde o Gulp vai buscar as tarefas a serem executadas. Crie este arquivo na raiz do projeto com o seguinte conteúdo:

var gulp         = require('gulp');
var spawn = require('child_process').spawn;
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var node, mongo;


var scripts = function() {
        /* pegamos os arquivos passados em gulp.src, concatenamos todos em um único arquivo chamado app.js, minificamos este arquivo e salvamos o mesmo na pasta /public/javascripts/build */
return gulp.src(['./public/javascripts/module.js',
            './public/javascripts/config.js',
            './public/javascripts/services.js',
            './public/javascripts/controllers.js',
            './public/javascripts/filters.js',
            './public/javascripts/directives.js'])
  .pipe(concat('app.js'))
  .pipe(uglify())
  .pipe(gulp.dest('./public/javascripts/build'))
}

var server = function() {

console.log("reiniciando servidor");
// inicializamos o processo mongod se o mesmo não foi inicializado ainda
if(!mongo)
mongo = spawn('mongod');

        // Reinicializamos o servidor
if(node)
node.kill();

node = spawn('node', ['./bin/www'], {stdio: 'inherit'});

};

// a tarefa start é responsável por concatenar e minificar os scripts e reinicializar o servidor
gulp.task('start', function(callback) {
       
scripts();
server();

        /* sempre que o arquivo app.js (nosso arquivo principal do servidor) ou algum arquivo com extensão js na pasta /routes for modificado refazemos o processo de concatenação e minificação dos scripts e reinicialização do servidor */
gulp.watch(['./app.js','./routes/*.js'], function() {
scripts();
server();
});
});

Altere o arquivo index.html na pasta /public para que o atributo src da tag script de app.js aponte para /javascripts/build/app.js


No terminal, no diretório raiz do projeto, digite: gulp start

Espero que este post tenha sido útil.
Abraço.