Automatizando o Desenvolvimento com Gulp – Parte 2

Dando sequência ao post sobre ferramentas para front-end, hoje vou apresentar uma seleção de plugins para Gulp que todo desenvolvedor font-end deve conhecer.

Antes de continuar, eu presumo que você tenha um projeto que foi criado no post anterior. Se não tiver, essa é a hora.

HTML

Uma coisa que sempre me incomada ao trabalhar em um projeto front-end é ficar adicionando jscss no arquivo HTML, eu sempre me esqueço. Bem, existe um plugin Gulp para isso.

Primeiramente vamos criar um arquivo .css e um outro .js para ilustrar o problema:

/src/styles/style.css

body {
  padding: 0;
  background-color: #CCC;
}

/src/js/script.js

/**
 * Função de exemplo
 */
function hello(name) {
  console.log('Nome', name);

  alert('Olá ' + name);
}

Precisamos fazer com que esses dois arquivos sejam copiados para o diretório /dist. Temporariamente vamos editar a task copiar:

gulp.task('copiar', ['limpar'], function(){
  return gulp.src([
    __dirname + '/src/index.html',
    __dirname + '/src/*/**.css',
    __dirname + '/src/*/**.js'
  ])
    .pipe(gulp.dest(__dirname + '/dist'));
});

Para testar, execute: gulp copiar e verifique que todos os arquivos foram copiados para o diretório /dist, e sem perder a estrutura de diretórios.

Agora vamos dizer ao Gulp para verificar quais os .js.css estão no diretório /dist e adicioná-los no html.

var inject = require('gulp-inject');
gulp.task('inject:project', function() {

    var resources = gulp.src(__dirname + '/dist/*/**', {read: false});

    return gulp.src(__dirname + '/dist/index.html')
      .pipe(inject(resources, {
        ignorePath: '/dist'
      }))
      .pipe(gulp.dest(__dirname + '/dist'));
});

Como vocês já viram, o plugin que vamos usar aqui é o gulp-inject. Então precisamos adicioná-lo ao projeto com:

npm install --save-dev gulp-inject

Repare que na linha 4 criamos uma varável resources, ela aponta para todos arquivos dentro de algum diretório, dentro de /dist. No nosso caso, apenas um .css e um .js.

gulp.src() da linha 6 aponta para o arquivo que deve receber os resources. Lembre-se que também podemos passar um array como parametro.

ignorePath (linha 8), diz ao plugin que não precisamos dessa parte do caminho do arquivo no html.

Agora precisamos adicionar algumas marcações no html para indicar ao plugin onde os arquivos devem ser injetados:

<!DOCTYPE html>
<html>
   <head>
     <meta charset="UTF-8">
     <title>Ferramentas para Front-end</title>
     <!-- inject:css -->
     <!-- endinject -->
   </head>
   <body>
     <h1>Algumas ferramentas</h1>
     <ul>
       <li><span>NPM</span></li>
       <li><span>Bower</span></li>
     </ul>

     <!-- inject:js -->
     <!-- endinject -->
   </body>
 </html>

E para testar:

gulp copiar
gulp inject:project

Agora abra o arquivo /dist/index.html e veja que todos os nossos resources foram adicionados. 🙂

Claro que ficar executando dois comandos para um único resultado não é legal. Então vamos criar uma nova task apenas para agrupar essas duas:

gulp.task('build', ['copiar', 'inject:project']);

Tudo certo? Mas se você executar essa nova task, vai reparar que não funcionou. Isso acontece porque as duas tarefas são executas em paralelo: copiar (que tem um limpar dentro) e inject:project.

Bem, temos um plugin para resolver isso também.

var runSequence = require('run-sequence');
gulp.task('build', function (done) {
    return runSequence('copiar', 'inject:project', done);
});

E instale-o com:

npm install --save-dev run-sequence

Agora tudo deve funcionar com um simples gulp build.

Javascript

Todos sabemos que Javascript não é compilado, e que o código fonte que escrevemos vai direto para o navegador do usuário. A verdade não é bem essa. Entre as boas práticas que devemos seguir com arquivos Javascript estão a minificação, a ofuscação e a contatenação do código fonte. Na prática isso significa remover todos os comentários, espaços e tabulações, renomear as funções e variaveis para nomes mais curtos e juntar tudo em um único arquivo. Isso diminui consideravelmente o tamanho do arquivo (minificação), diminui a legibilidade do código fonte (ofuscação) e diminui a quantidade de chamadas do cliente (concatenação).

De volta ao nosso arquivo gulpfile.js vamos adicionar uma nova task():

var uglify = require('gulp-uglify');
var concat = require('gulp-concat');

gulp.task('build:js', function () {
  return gulp.src(__dirname + '/src/js/*.js')
    .pipe(uglify())
    .pipe(concat('js/scripts.min.js'))
    .pipe(gulp.dest('dist'));
});

Lembre-se de instalar as duas novas dependências:

npm install --save-dev gulp-uglify gulp-concat

Note que estamos executando os dois plugins no mesmo stream do Gulp. Primeiro executamos o uglify() (linha 6), que vai remover toda os espaços e tabulações desnecessárias e também modifica o nome das variáveis internas. E depois, na linha seguinte, executamos o concat(), que irá juntar tudo em um único arquivo. Precisamos informar ao concat() qual será o nome do arquivo concatenado.

Execute o comando gulp build:js e verifique o resultado no arquivo /dist/js/scripts.min.js.

Tarefa de casa: adicione mais arquivos ao diretório /src/js, execute novamente o build:js e veja o resultado.

Como eu tinha dito no início, aquela alteração na task de copiar era temporária, e já podemos remover a linha do Javascript:

gulp.task('copiar', ['limpar'], function(){
  return gulp.src([
    __dirname + '/src/index.html',
    __dirname + '/src/*/**.css'
  ])
    .pipe(gulp.dest(__dirname + '/dist'));
});

Também devemos adicionar o build:js a tarefa de build:

gulp.task('build', function (done) {
    return runSequence('copiar', 'build:js', 'inject:project', done);
});

Note que ela deve ficar antes de inject:project, isso é muito importante.

Sabemos que também é possível fazer a concatenação de arquivos .css, mas eles não foram incluídos aqui por um motívo óbvio: não queros juntar os .css e os .js em um único arquivo.

CSS

Ok, você já conhece a concatenação, e poderiamos fazer um build:css. Sim você está certo. Mas quero ir mais além.

Você já conhece o Sass e o Less? Adivinha? Temos um plugin do Gulp para trabalhar com eles!

Adicione esses dois arquivos .less ao projeto, no diretório /src/styles:

main.less

@import "_buttons";

body {
  background-color: #CCC;
  padding: 0;
  
  .container {
    width: 990px;
    margin: 0 auto;
  }
}

_buttons.less

@color: #069;
@color-dark: darken(@color, 10%);

.btn {
  background-color: @color;

  &-dark {
    background-color: @color-dark;    
  }
}

Precisamos também instalar o gulp-less:

npm install --save-dev gulp-less

Nota: se você prefir também existe o gulp-sass

E a nossa nova task:

var less = require('gulp-less');
gulp.task('build:css', function (done) {
  return gulp.src(__dirname + '/src/styles/main.less')
    .pipe(less())
    .pipe(concat('styles/styles.min.css'))
    .pipe(gulp.dest('dist'));
});

O gulp-less tem algumas opções mais avançadas, que podem ser vistas aqui.

Podemos adicionar o build:css no build:

gulp.task('build', function (done) {
    return runSequence('copiar', ['build:js', 'build:css'], 'inject:project', done);
});

A novidade aqui é que build:js e build:css podem ser executadas ao mesmo tempo, por isso estão dentro de um array.

Talvez o aquele primeiro arquivo .css não seja mais necessário.

Executando gulp build podemos ver que todo o projeto é montado no diretório /dist.

Isso é tudo?

Não, não é. Isso está mais para “a ponta do iceberg“. Também temos plugins para test, sintaxe check, webserver, Angular, CoffeScript, Jade e por aí vai…

Se você trabalha com alguma tecnologia que não foi comentada aqui, procure algum plugin para ela, e compartilhe aqui nos comentários sua experiência.

Até a próxima.

Por FERNANDO FALCI

Postado em: 01 de outubro de 2015

Confira outros artigos do nosso blog

Variáveis nativas no CSS: elas existem?

14 de maio de 2018

Patrícia Gomes dos Santos Silva

How-to: Conhecendo o SASS

07 de maio de 2018

Bruno Carvalho

Introdução ao Webpack 2

10 de julho de 2017

Alan Cesar Elias

Começando com Angular 2

09 de fevereiro de 2017

Otávio Felipe do Prado

Deixe seu comentário