Linha de comando para desenvolvimento web: automações com o Gulp

() translation by (you can also view the original English article)

No tutorial anterior, criamos um projeto e configuramos o Grunt para monitor e compilar automaticamente os arquivos relacionados ao Stylus e Jade. Neste tutorial vamos fazer algo similar, mas utilizando uma ferramenta diferente: o Gulp.

Introdução ao Gulp

Instalando o Gulp

Instale o Gulp globalmente com o comando:

1	[sudo] npm install gulp -g

Configurando um projeto no Gulp

Crie o arquivo package.json

Assim como o Grunt, para criar o arquivo "package.json" basta executar o comando npm init.

Instalando os pacotes do Gulp

Instale o Gulp no seu projeto e salve como uma depêndencia (normalmente utilizado em ambiente de desenvolvimento) com o comando:

1	npm install gulp --save-dev

Crie o arquivo gulpfile.js

No Grunt temos o arquivo "gruntfile", no Gulp temos o arquivo "gulpfile". Na raiz do seu projeto com o Gulp, crie um arquivo com o nome "gulpfile.js".

Para começar, vamos dar acesso ao pacote do "gulp" que instalamos na pasta "node_modules", adicionando a seguinte linha no inicio do nosso arquivo gulpfile:

1	var gulp = require('gulp');

Instalando plugins no Gulp

Na realidade, o Gulp não precisa de plugins, porque ele utiliza os pacotes vanilla npm. De qualquer forma, existem alguns plugins que são específicos para o Gulp, e para quem está começando, eles podem ser bem úteis e simples.

Voce pode procurar plugins para o Gulp no endereço: http://gulpjs.com/plugins/

Vamos instalar os seguintes plugins:

Esses plugins essencialmente tem as mesmas funcionalidades dos plugins que utilizamos com o Grunt, salvo algumas diferenças.

Primeiro, não precisamos instalar o plugin "watch", pois o Gulp já tem o recurso embutido.

Segundo, vamos instalar o plugin "gulp-concat" para juntar todos os arquivos (concatenar arquivos) antes de minificar todo o pacote. Agradecer ao Dan por esta dica!

Nota: vamos utilizar um plugin chamado "gulp-minify-css", que implica na mesma funcionalidade do pacote "clean-css" que já utilizamos anteriormente.

Com o terminal apontando para pasta do projeto, execute cada dos seguintes comandos:

1	npm install gulp-stylus --save-dev

1	npm install gulp-autoprefixer --save-dev

1	npm install gulp-minify-css --save-dev

1	npm install gulp-jade --save-dev

1	npm install gulp-uglify --save-dev

1	npm install gulp-concat --save-dev

Quando você terminar de entrar com os comandos, confira se as seguintes pastas estão estão presentes na pasta "node_modules":

Habilitando os plugins através do Gulpfile

Assim como no Grunt, precisamos habilitar cada um dos plugins, neste caso executamos tal tarefa editando o arquivo gulpfile. Ao invés de utilizar o método grunt.loadNpmTasks, no Gulp vamos utilizar a função require nativa do NodeJS.

Adicione as seguintes linhas de código no arquivo gulpfile, logo após a linha de código que inserimos a pouco.

var stylus = require('gulp-stylus');
var autoprefixer = require('gulp-autoprefixer');
var minifyCSS = require('gulp-minify-css');
var jade = require('gulp-jade');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var concat = require('gulp-concat');

Essa parte é um pouco diferente do Grunt, que neste estágio ainda não possui nenhum comando registrado para execução. Ao invés disso, apenas criamos variáveis JavaScript, cada uma representando um dos plugins, que podemos utilizar depois através do arquivo gulpfile.

Configurando e executando tarefas Gulpfile

Uma das principais diferenças entre o Grunt e o Gulp é que com o Gulp você não precisa configurar individualmente uma tarefa para cada plugin que você estiver utilizando no projeto. Ao invés disso, apenas configuramos tarefas para os comandos que você desejamos executar.

Stylus, Autoprefixer & minifyCSS

No nosso arquivo gruntfile, anterior registramos uma tarefa para o Stylus, uma para o Autoprefixer e uma para o clean-css. No nosso arquivo gulpfile não precisamos fazer dessa maneira. Sempre que compilamos códigos Stylus desejamos que o resultado do CSS já esteja com prefixos e minificado, então vamos criar uma unica tarefa para executar todas essas ações de uma vez.

Adicione as seguintes linhas no fim do seu arquivo gulpfile:

gulp.task('css', function () {
    gulp.src('source/stylus/main.styl')
      .pipe(stylus({compress: false, paths: ['source/stylus']}))
		.pipe(autoprefixer())
		.pipe(minifyCSS())
		.pipe(rename('style.css'))
		.pipe(gulp.dest('build'))
});

Vamos entender o que foi feito.

Primeiro, utilizamos o gulp.task() para criar uma nova tarefa chamada css, e logo em seguida deixamos espaço para uma função JavaScript que pode ser executada toda vez que o comando gulp css for executado:

1	gulp.task('css', function () {
2
3	});

Depois, utilizamos o gulp.src() para definir o arquivo gerado após processar o arquivo "source/stylys/main.styl" de estilos:

1	gulp.task('css', function () {
2	gulp.src('source/stylus/main.styl')
3
4	});

Depois, utilizamos a função pipe() do Gulp para requisitar cada um dos plugins. O pipe() funciona da seguinte maneira, todo plugin apontado com um pipe, passa por todos os pipes até o fim, como uma conexão de canos.

Nosso primeiro "pipe" configura a compilação do Stylus, utilizando as mesmas opções para compressão/compress e caminho/path que utilizamos anteriormentte no Grunt:

gulp.task('css', function () {
    gulp.src('source/stylus/main.styl')
        .pipe(stylus({compress: false, paths: ['source/stylus']}))

});

Depois conectamos o segundo pipe, que analisa o código compilado e adiciona o autoprefixing:

gulp.task('css', function () {
    gulp.src('source/stylus/main.styl')
        .pipe(stylus({compress: false, paths: ['source/stylus']}))
		.pipe(autoprefixer())

});

Depois, conectamos o terceiro pipe, que pega o código compilado e com prefixos e da uma enxugada:

gulp.task('css', function () {
    gulp.src('source/stylus/main.styl')
        .pipe(stylus({compress: false, paths: ['source/stylus']}))
		.pipe(autoprefixer())
		.pipe(minifyCSS())

});

Neste ponto, se o processo gerar um arquivo CSS, o mesmo vai se chamar "main.css" , que corresponde ao arquivo "main.styl" que apontamos no inicio. Então, vamos conectar um quarto pipe para renomear o arquivo gerado com o nome de "style.css".

gulp.task('css', function () {
    gulp.src('source/stylus/main.styl')
        .pipe(stylus({compress: false, paths: ['source/stylus']}))
		.pipe(autoprefixer())
		.pipe(minifyCSS())
		.pipe(rename('style.css'))

});

Por fim, conectamos o quinto e último pipe que define para onde o arquivo CSS gerado é enviado. Para isso, utilizamos o gulp.dest() para definir a pasta de saída do arquivo.

gulp.task('css', function () {
    gulp.src('source/stylus/main.styl')
        .pipe(stylus({compress: false, paths: ['source/stylus']}))
		.pipe(autoprefixer())
		.pipe(minifyCSS())
		.pipe(rename('style.css'))
		.pipe(gulp.dest('build'))
});

Agora, a terefa css que criamos está pronta para ser executada. Com terminal apontando para raiz do projeto, execute o comando:

gulp css

...e então o arquivo Stylus vai ser compilado, serão adicionados os prefix de outros navegadores, feita limpeza no arquivo (esse processo apaga caracteres irrelevantes no arquivo para otimizar o processamento), para no fim ser gerado o arquivo "style.css" no caminho especificado.

Jade

Vamos utilizar o mesmo processo para configurar a tarefa de compilar os arquivos Jade. Vamos criar uma tarefa chamada html, configurar a mesma para utilizar todos os arquivos com a extensão ".jade" na pasta de origem "source/jade", compilar, e então enviar os arquivo HTML gerados para a pasta "build".

Adicione o seguinte código logo após a tarefa css que acabamos de criar:

gulp.task('html', function() {
  gulp.src('source/jade/*.jade')
    .pipe(jade())
    .pipe(gulp.dest('build'))
});

Execute a nova tarefa criada com o comando:

gulp html

...e então você notar que os arquivos Jade foram compilados para os arquivos HTML correspondentes na pasta "build".

Uglify

Agora vamos utilizar o mesmo processo mais uma vez, configurando uma tarefa chamada js para pegar os arquivos jQuery e Modernizr na pasta "bower_components", concatenar e minificar estes, e após isso gerar o arquivo "output.min.js" na pasta "build".

gulp.task('js', function() {
  gulp.src([
    'bower_components/jquery/dist/jquery.js',
    'bower_components/modernizr/modernizr.js'
  ])
    .pipe( concat('output.min.js') ) // concat pulls all our files together before minifying them
    .pipe(uglify())
    .pipe(gulp.dest('build'))
});

Nota: neste caso desejamos especificar dois arquivos de origem, então informamos os nome em um array, separando cada um com uma vírgula.

Execute a tarefa js com o comando:

gulp js

...e você vai notar que foi gerado um novo arquivo chamado "output.min.js" na pasta "build", contendo o código do arquivo jQuery e Modernizr minificados.

Criando a tarefa "watch"

Agora que temos nossas tarefas css e html configuradas, podemos utilizar a função gulp.watch() do Gulp para executar automaticamente as tarefas.

Adicione o seguinte código no fim do seu arquivo Gulpfile para criar a tarefa watch:

1	gulp.task('watch', function () {
2	gulp.watch('source/stylus/*.styl', ['css']);
3	gulp.watch('source/jade/*.jade', ['html']);
4	});

A primeira execução do gulp.watch() determina que a tarefa css vai ser executada toda vez que algum arquivo ".styl" na pasta "source/stylus" sofrer alteração.

A segunda execução do gulp.watch() determina que a tarefa html vai ser executada toda vez que algum arquivo ".jade" for alterado na pasta "source/jade".

Execute a tarefa watch com o comando:

1	gulp watch

...agora, qualquer alteração feita em um dos arquivos Stylus ou Jade são automaticamente compilados.

Criado a tarefa "default"

Assim como fizemos com nosso projeto Grunt, vamos criar uma regra padrão que vai ser executada toda vez que executarmos o comando gulp sozinho.

Adicione o seguinte código no fim do seu arquivo gulpfile:

1	gulp.task('default', ['css', 'html', 'js']);

Utilizamos essa tarefa para criar todo nosso projeto, incluindo o JavaScript, já que a mesma executa as outras tarefas css, html e js.

Para criar todo seu projeto com um comando padrão, utilize o comando:

gulp

No próximo tutorial

No próximo tutorial vamos adicionar os toques finais nos projetos Grunt e Gulp, e que realmente podem fazer a diferença e torna-los muito eficientes, que seriam o live reloading e a sincronização de navegadores, ou browser synchronizatiton.

Você vai aprender a criar um comando para executar seu projeto em um servidor local, simulando um servidor web na sua máquina utilizando o protocolo http:// ao invés do file:// para visualizar os arquivos.

E como os arquivos base do seu projetos são monitorados para serem compilados novamente a qualquer mudança, o preview no servidor local vai ser recarregado automaticamente logo após qualquer alteração nos arquivos especificados.

Também vamos configurar a pré visualização local, assim qualquer navegador que você utilizar vai sincronizar as mudanças, incluindo navegadores em diferentes dispositivos, mas na mesma conexão com a internet, como tablets ou smartphones. Abre o menu em um dos navegadores, e veja o que acontece nos outros dispositivos ao mesmo tempo.

Nos vemos no próximo tutorial!

Seja o primeiro a saber sobre novas traduções–siga @tutsplus_pt no Twitter!