Gulp

Contexto

Gulp é uma ferramenta de automação de build que utiliza a streaming do Node. Toda a manipulação dos arquivos é feita na memória, e só é salvo no arquivo quando você envia o comando para salvar.

As ferramentas de automação servem para auxiliar os programadores a realizar algumas tarefas repetitivas mas essenciais para o desenvolvimento, como por exemplo, mimificação, concatenação de arquivos, versão de build, testes, dentre outras. O gulp simplifica as tarefas para que os programadores não as repita manualmente, tendo mais tempo para tarefas não repetitivas, logo, maior produtividade.

O Gulp vem para melhorar o que já existe, sendo a alternativa de maior destaque para ferramentas de build tradicionais, como o Maven, Ant, Grunt, e afins.

Instalação

A instalação é feita via NPM, utilizando o seguinte fluxograma:

• É necessário ter um package.json
• $ npm install -g gulp
• $ npm install --save-dev gulp
• Criar e editar o arquivo gulpfile.js
• $ gulp {TASK}

Vantagens

O Gulp possui vantagens claras sobre as demais opções, algumas dessas vantagens são experiências instrinsecas, portanto, fica a critério da necessidade e aplicabilidade de cada um. São algumas das vantagens constantemente relatadas por usuários:

• + Performance
• + Possibilidades
• + Facilidades
• - Código + Simplicidade
• API concisa e resumida
• Plugins que fazem apenas uma coisa, muito bem feita

Desvantagens

Por depender da plataforma Node.JS, o gulp fica definido com os mesmos contextos do Node, portanto, se o usuário não entender as Streams (emissores de eventos) do Node, ele terá grandes problemas para compreender o Gulp.

Comparações

Comparação Gulp vs Grunt:

Tendo em vista que estas ferramentas fazem a mesma coisa, de jeitos diferentes, é válido a comparação.

• Gulp é mais fácil para ler, enquanto Grunt é mais facil para escrever.
• Gulp é melhor em performance e aplicabilidade
• Gulp permite mais liberdade
• Grunt permite mais compreensão sobre o processo de Build

As ferramentas são singulares em suas qualidades, cabe ao usuário escolher a que melhor se encaixa no contexto da aplicação e das necessidades.

Especificações

API

• TASK -> Define a tarefa
• SRC -> Leitura dos arquivos IN
• DEST -> Escrita dos arquivos OUT
• WATCH -> Monitorar os arquivos para alterações
• RUN -> Executa as tarefas

Plugins

Atualmente, o gulp conta com 2993 plugins oficiais, que fazem muito bem suas funcionalidades.

GulpFile

É onde são definidas as tasks.

• O primeiro passo é instanciar os módulos que serão utilizados.

• O segundo é definir a tarefa, com 2 parâmetros:

1. Nome da tarefa
2. Função callback com os passos a ser executados

Exemplo de gulpFile

var gulp = require('gulp');
var bump = require('gulp-bump');
var git = require('gulp-git');
var gutil = require('gulp-util');
var bower = require('bower');
var concat = require('gulp-concat');
var sass = require('gulp-sass');
var minifyCss = require('gulp-minify-css');
var fs = require('fs');
var cucumber = require('gulp-cucumber');
var uglify = require('gulp-uglify');

var contextProducao = "/api"

gulp.task('accept', function(callback) {
    runSequence(
        'setDB',
        'cucumber',
        function(error) {
            if (error) {
                console.log(error.message);
            } else {
                console.log('TESTES FINALIZADOS');
            }
            callback(error);
        });
})

gulp.task('setDB', function(cb) {
    exec('psql -f ./tests/dump.sql -U aebrh aebrh', function(err, stdout, stderr) {
        console.log("FUNFO");
        console.log(stdout);
        console.log(stderr);
        cb(err);
    });
})

gulp.task('cucumber', function() {

    var file = "*";
    if (process.argv.length >= 4) {
        file = process.argv[3].replace(/-+/, "");
    }

    return gulp.src('./tests/features/' + file)
        .pipe(cucumber({
            'steps': './tests/features/step_definitions/commom_steps.js',
            'support': './tests/features/support/*.js'
        }))
})

gulp.task('bump-version', function() {
    var argv = require('minimist')(process.argv.slice(2));
    var version_type = "patch";
    if (argv.type !== undefined) {
        version_type = argv.type;
    }

    return gulp.src(['./bower.json', './package.json'])
        .pipe(bump({
                type: version_type
            })
            .on('error', gutil.log))
        .pipe(gulp.dest('./'));
});

gulp.task('commit-changes', function() {
    return gulp.src('.')
        .pipe(git.add())
        .pipe(git.commit('[Prerelease] Bumped version number'));
});

gulp.task('create-new-tag', function(cb) {
    var version = getPackageJsonVersion();
    git.tag(version, 'Created Tag for version: ' + version, function(error) {
        if (error) {
            return cb(error);
        }
        git.push('origin', 'master', {
            args: '--tags'
        }, cb);
    });
});

gulp.task('sass', function(done) {
    gulp.src('./resources/sass/style.scss')
        .pipe(sass({
            errLogToConsole: true
        }))
        .pipe(gulp.dest('./resources/dist/css'))
        .pipe(minifyCss({
                keepSpecialComments: 0
            })
            .on('error', onError))
        .pipe(rename({
            extname: '.min.css'
        }))
        .pipe(gulp.dest('./resources/dist/css/'))
        .on('end', done);
});

gulp.task('vendorCss', function() {
    return gulp.src(['./bower_components/angular-material/angular-material.min.css', './resources/fonts/robotoRegular/roboto_regular.css', './bower_components/jquery-ui/themes/redmond/jquery-ui.min.css', './libs/jquery.ptTimeSelect/src/jquery.ptTimeSelect.css'])
        .pipe(concat('vendor.css'))
        .pipe(minifyCss({
                keepSpecialComments: 0
            })
            .on('error', onError))
        .pipe(rename({
            extname: '.min.css'
        }))
        .pipe(gulp.dest('./resources/dist/css'));
});

gulp.task('build', function() {
    gulp.src(
            [
                './app.js',
                './appConfig.js',
                './components/**/*.js',
                './app/commom/controllers/**/*.js',
                './app/admin/controllers/**/*.js',
                "./app/**/*.js"
            ])
        .pipe(concat('app.min.js'))
        .pipe(replace(/app\/(.+?(?!=abc\/))\/templates\//g, 'html/$1/templates/'))
        .pipe(replace('resources/img/', "img/"))
        .pipe(replace('components/', 'html/'))
        .pipe(replace(/http:\/\/localhost:8080/g, urlProducao))
        .pipe(replace('aebRh-api/', contextProducao))
        .pipe(sourcemaps.init())
        .pipe(concat('app.min.js'))
        .pipe(ngAnnotate())
        .pipe(uglify())
        .pipe(sourcemaps.write())
        .pipe(gulp.dest('./resources/dist'))
})

gulp.task('finalBuild', ['build', 'sass', 'aeb', 'vendor', 'vendorCss', 'buildHtml', 'fixIndex', 'buildImages', 'buildIcons']);

Conclusões

O Gulp é uma ferramenta poderosíssima, sendo de grande aplicabilidade e utilidade. Aqui foram apresentados conceitos gerais sobre a ferramenta, é recomendável para continuação da compreensão, a leitura da documentação no site oficial. [ http://gulpjs.com/ site oficial]