Uma introdução à automação JavaScript com Gulp

Como desenvolvedores da Web, às vezes nos encontramos repetindo as mesmas tarefas tediosas várias vezes. Se você considerar quanto tempo é desperdiçado executando um comando de compilação ou clicando em atualizar em seu navegador, perceberá que pode estar economizando muito tempo. Além disso, automatizando seus processos, você pode manter o foco na tarefa em mãos em vez de sair temporariamente da “zona” (seu estado de produtividade).

Neste tutorial de automação de JavaScript, você aprenderá como automatizar seu processo de design e desenvolvimento com o Gulp. Se você é mais orientado para o design, eu o encorajo a superar quaisquer medos que você tenha e a continuar lendo. Por outro lado, se você é um desenvolvedor, poderá varrer isso assim que entender a lógica por trás disso.

Gulp é um sistema de compilação que emprega os fluxos do Node.js para implementar uma abordagem de origem-destino assíncrona para automação. Tudo é escrito em JavaScript, por isso é fácil para qualquer pessoa com conhecimento intermediário de codificação começar. Um processo de compilação do Gulp consiste em uma coleção de observadores e tarefas. Além disso, a comunidade por trás do Gulp mantém um enorme diretório de plugins no npm que ajuda a realizar qualquer tarefa, desde concatenar JavaScript até criar fontes de ícones de SVGs.

Alternativas ao Gulp

Existem muitas alternativas por aí, a maioria das quais surgiu nos últimos dois anos - sendo a mais notável Grunt. A disputa entre Gulp e Grunt nunca terá um vencedor claro, pois ambos têm seus prós e contras, portanto, evitarei aprofundar isso. Em poucas palavras, a forte dependência do Grunt na configuração é o que direciona as pessoas para a abordagem JavaScript do Gulp. Enquanto isso, implementações de GUI nativas, como Koala, ganharam algum terreno, principalmente de pessoas que se recusam a entrar em codificação. No entanto, com os aplicativos agrupados, é impossível atingir o nível de personalização e extensibilidade que o Gulp oferece.

Fundamentos de Automação de Processos

Plug-ins

Plugins são os meios pelos quais o gulp realiza cada processo. Os plugins são instalados através do npm e iniciados usando “require”.

Tarefas

Para o Gulp, as tarefas sempre têm uma origem e um destino. Entre eles estão os pipes que chamam cada plugin e enviam os resultados transmutados para o próximo pipe.

Globos

Globs são padrões curinga que se referem a arquivos. Globs ou arrays de globs são usados ​​como entradas na fonte da tarefa.

Vigilantes

Os observadores observam as alterações nos arquivos de origem e chamam as tarefas sempre que uma alteração é detectada.

gulpfile.js

Este é o arquivo JavaScript para o qual o comando “gulp” aponta. Ele contém tudo, desde as tarefas até os observadores ou outros pedaços de código usados ​​pelas tarefas.

Uma tarefa simples

Para começar, você precisa do Node.js e de um shell de linha de comando com acesso de administrador. Você pode baixar o Node.js aqui. Uma vez instalado, você pode executar o seguinte comando para garantir que o npm esteja atualizado.

 sudo npm install npm -g

O sinalizador -g indica que a instalação será global.

Agora você está pronto para instalar o Gulp e começar a chamar algumas tarefas simples. Use o seguinte comando para instalar o Gulp globalmente.

 sudo npm install gulp -g

Observe que você também pode usar o mesmo comando para atualizar.

Você pode baixar o kit inicial que o ajudará com sua primeira tarefa em toptal-gulp-tutorial/step1. Inclui uma tarefa muito simples que compila arquivos SCSS para CSS. Ele está usando o plugin gulp-sass, que emprega libsass. Eu escolhi libsass aqui porque é muito mais rápido que a alternativa Ruby, embora falte algumas de suas funcionalidades. Uma vez no diretório raiz do seu projeto, você pode usar o seguinte comando para instalar todos os plugins necessários.

 npm install

Este comando lê o arquivo package.json e instala todas as dependências necessárias. Estamos usando “npm install” aqui como um atalho para o seguinte:

 npm install gulp --save-dev npm install gulp-sass --save-dev

O sinalizador “–save-dev” adiciona os plugins selecionados ao package.json devDependencies para que da próxima vez que você quiser instalar tudo, você possa usar o prático “npm install”.

Neste ponto, você pode executar sua primeira tarefa. Execute o seguinte comando e observe como todos os arquivos SCSS na pasta /scss são compilados em CSS no diretório correspondente:

 gulp scss

Observe que neste exemplo estamos especificando a tarefa a ser executada. Se omitíssemos o nome da tarefa, aquela chamada “default” seria executada.

Passo a passo do código

O acima é realizado em apenas 7 linhas de código JavaScript. Certamente, você se sentirá em casa assim que entender a simplicidade:

 var gulp = require('gulp'); var scss = require('gulp-sass');

No início inicializamos todos os plugins que usaremos. Gulp é o único que não podemos prescindir:

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

Definimos a tarefa chamada “scss”:

 return gulp.src('scss/*.scss')

Defina os arquivos de origem para a tarefa. Estes são definidos como globs. Neste exemplo estamos nos referindo a todos os arquivos da pasta “scss/” que terminam em “.scss”.

 .pipe(scss())

Neste ponto, chamamos o plugin gulp-sass que definimos anteriormente:

 .pipe(gulp.dest('css'));

Finalmente, usamos “gulp.dest” para definir a pasta de destino para nossos arquivos. Isso também pode ser um único nome de arquivo se os arquivos forem concatenados.

Para melhorar ainda mais essa implementação de automação de processos, você pode tentar incluir alguns outros plugins Gulp. Por exemplo, você pode querer minimizar o produto final de sua tarefa usando gulp-minify-css e adicionar automaticamente prefixos de fornecedores com gulp-autoprefixer.

Contratando um Vigilante

Eu criei um kit inicial de observador que você pode usar imediatamente. Você pode baixá-lo em toptal-gulp-tutorial/step2. Ele inclui uma versão aprimorada da tarefa SCSS criada anteriormente e um observador que observa os arquivos de origem e chama a tarefa. Para iniciá-lo, use o seguinte comando:

 gulp

Este comando inicia a tarefa “padrão” que inicia o observador. Neste ponto, você pode editar qualquer um dos arquivos SCSS e observar como os arquivos CSS são recompilados. Você poderá ver as notificações do Gulp na linha de comando.

Passo a passo do código

Configuramos um observador para nossa tarefa com apenas 3 linhas extras de código. Dito isto, o kit inicial do observador não difere muito do exemplo introdutório. Nesta seção, vamos passar por todas as adições e alterações.

 return gulp.src(['scss/**/*.scss', '!scss/**/_*'])

Neste exemplo, a fonte Gulp é fornecida com uma matriz de globs. O primeiro inclui todos os arquivos que terminam em “.scss” também em subpastas, e o segundo exclui os que começam com “_”. Dessa forma, podemos usar a função interna do SCSS @import para concatenar o arquivo _page.scss.

 gulp.task('default', ['scss'], function() {

Aqui definimos a tarefa “padrão”. A tarefa “scss” é executada como uma dependência antes de “default”.

 gulp.watch('scss/**/*.scss', ['scss']);

Finalmente, chamamos a função watch do Gulp para apontar para qualquer arquivo que termine com “.scss” e sempre que ocorrer um evento de alteração, para executar a tarefa “scss”.

Agora você está pronto para criar novos observadores para outros processos automatizados, como concatenação JavaScript, dicas de código, compilação CoffeeScript ou qualquer outra coisa que possa vir à mente. Para aprofundar essa implementação de automação JavaScript, proponho adicionar gulp-notify que notificará você quando uma tarefa for executada. Além disso, você pode criar uma tarefa separada para minimizar o código CSS resultante e fazer com que a tarefa “scss” seja executada como uma dependência dela. Finalmente, você pode usar gulp-rename para adicionar o sufixo “.min” aos arquivos resultantes.

Plugins Gulp Avançados para Automação de JavaScript

Existem milhares de plugins na base de plugins do Gulp, alguns dos quais vão muito além da simples automação JavaScript de um processo de construção. Aqui estão alguns exemplos marcantes:

BrowserSync

O BrowserSync injeta CSS, JavaScript e atualiza automaticamente o navegador sempre que uma alteração é feita. Além disso, ele contém um recurso ghostMode que pode ser usado para assustar seus colegas ou para acelerar bastante o teste do seu navegador.

Navegar

O Browserify analisa as chamadas “require” em seu aplicativo e as converte em um arquivo JavaScript empacotado. Além disso, há uma lista de pacotes npm que podem ser convertidos em código do navegador.

Webpack

Semelhante ao Browserify, o Webpack visa converter módulos com dependências em arquivos estáticos. Este dá mais liberdade ao usuário sobre como as dependências do módulo serão configuradas, e não visa seguir o estilo de código do Node.js.

Carma

Gulp-karma traz o infame ambiente de testes para Gulp. O Karma segue a abordagem de configuração mínima que o Gulp também endossa.

Conclusão

Neste tutorial de automação de processos, demonstrei a beleza e a simplicidade de usar o Gulp como uma ferramenta de construção. Seguindo as etapas descritas no tutorial, você estará pronto para automatizar totalmente seu processo de desenvolvimento de software tanto em seus projetos futuros quanto em seus projetos legados. Investir algum tempo na configuração de um sistema de compilação para seus projetos mais antigos certamente economizará um tempo precioso no futuro.

Fique atento para um tutorial Gulp mais avançado em breve.