Articles /

Gulp for Beginners

Gulp é uma ferramenta que o ajuda com várias tarefas quando se trata de desenvolvimento web. É frequentemente usada para fazer tarefas front-end como:

  • Aparar um servidor web
  • Recarregar o navegador automaticamente sempre que um arquivo é salvo
  • Utilizar pré-processadores como Sass ou LESS
  • Optimizar recursos como CSS, JavaScript e imagens

Nota Importante! Este artigo foi escrito para o Gulp 3.x, mas agora o Gulp 4.x está fora e é recomendado. Como qualquer grande mudança de versão, as APIs têm mudanças de quebra. Se você instalar o Gulp 4 e tentar fazer algumas das coisas neste artigo, elas não vão funcionar. Vamos fazer algumas notas sobre isso aqui para lembrá-lo. Isto parece um bom começo do Gulp 4.

Esta não é uma lista completa de coisas que o Gulp pode fazer. Se você é louco o suficiente, você pode até mesmo construir um gerador de sites estático com o Gulp (eu fiz isso!). Então sim, Gulp é extremamente poderoso, mas você terá que aprender como usar Gulp se você quiser criar seus próprios processos de construção personalizados.

Então é para isso que este artigo serve. Ele o ajuda a ficar tão bom com o básico do Gulp que você pode começar a explorar tudo o resto por si mesmo.

Antes de mergulharmos no trabalho com o Gulp, vamos falar sobre porque você pode querer usar o Gulp ao invés de outras ferramentas similares.

Porquê Gulp?

Ferramentas como o Gulp são frequentemente referidas como “ferramentas de construção” porque são ferramentas para executar as tarefas de construção de um website. As duas ferramentas de construção mais populares no momento são o Gulp e o Grunt. (Chris tem um post sobre como começar com o Grunt aqui). Mas há outras, é claro. Broccoli foca na compilação de ativos, uma das tarefas mais comuns das ferramentas de compilação.

Já existem vários artigos cobrindo a diferença entre Grunt e Gulp e porque você pode usar um sobre o outro. Você pode conferir este artigo, este, ou este se você estiver interessado em saber mais. O Brunch é semelhante em seu foco em ativos, e ele agrupa em algumas das tarefas mais comuns como um servidor e um observador de arquivos.

A principal diferença é como você configura um fluxo de trabalho com eles. As configurações Gulp tendem a ser muito mais curtas e simples quando comparadas com o Grunt. O Gulp também tende a funcionar mais rápido.

Vamos agora seguir em frente e descobrir como configurar um fluxo de trabalho com o Gulp.

O que estamos a configurar

No final deste artigo, terá um fluxo de trabalho que faz as tarefas que delineamos no início deste artigo:

  • Pinos para um servidor Web
  • Compila Sass para CSS
  • Refressa o navegador automaticamente sempre que você salvar um arquivo
  • Optimiza todos os ativos (CSS, JS, fontes e imagens) para produção

Você também aprenderá como encadear diferentes tarefas em comandos simples que são fáceis de entender e executar.

Comecemos por instalar o Gulp no seu computador.

Instalando o Gulp

Você precisa ter o Node.js (Node) instalado no seu computador antes de poder instalar o Gulp.

Se você ainda não tem o Node instalado, você pode obtê-lo baixando o instalador de pacotes do site do Node.

Quando terminar de instalar o Node, você pode instalar o Gulp usando o seguinte comando na linha de comando: 

$ sudo npm install gulp -g

Nota: Somente usuários Mac precisam da palavra-chave sudo. (Veja o primeiro comentário de Pawel Grzybek se você não quiser usar o sudo). E lembre-se que o “$” no código acima apenas simboliza o prompt de comando. Isso não faz parte do comando que você executa.

O comando npm install que usamos aqui é um comando que usa o Node Package Manager (npm) para instalar o Gulp no seu computador.

A bandeira -g neste comando diz ao npm para instalar o Gulp globalmente no seu computador, o que lhe permite utilizar o comando gulp em qualquer parte do seu sistema.

Os utilizadores do Mac precisam da palavra-chave extra sudo no comando porque precisam de direitos de administrador para instalar o Gulp globalmente.

Agora que você tem o Gulp instalado, vamos fazer um projeto que usa o Gulp.

Criando um Projeto Gulp

Primeiro, vamos criar uma pasta chamada project para o servidor como nossa raiz do projeto à medida que nos movemos através deste tutorial. Execute o comando npm init de dentro desse diretório:

# ... from within our project folder$ npm init

O comando npm init cria um arquivo package.json para o seu projeto que armazena informações sobre o projeto, como as dependências usadas no projeto (Gulp é um exemplo de dependência).

npm init irá avisá-lo:

Após o arquivo package.json ser criado, podemos instalar o Gulp no projeto usando o seguinte comando: 

$ npm install gulp --save-dev

Desta vez, estamos instalando o Gulp em project ao invés de instalá-lo globalmente, e é por isso que existem algumas diferenças no comando.

Você verá que a palavra-chave sudo não é necessária porque não estamos instalando o Gulp globalmente, então -g também não é necessário. Adicionamos --save-dev, que diz ao computador para adicionar gulp como uma dependência do dev em package.json.

Se você verificar a pasta do projeto quando o comando tiver terminado de executar, você deve ver que o Gulp criou uma pasta node_modules. Você também deve ver uma pasta gulp dentro de node_modules.

Estamos quase prontos para começar a trabalhar com o Gulp. Antes de fazê-lo, temos que ser claros sobre como vamos usar o Gulp para o projeto, e parte disso é decidir sobre uma estrutura de diretório.

Determinando Estrutura de Pasta

Gulp é flexível o suficiente para trabalhar com qualquer estrutura de pasta. Você só terá que entender o funcionamento interno antes de ajustá-lo para o seu projeto.

Para este artigo, vamos usar a estrutura de um webapp genérico: 

 |- app/ |- css/ |- fonts/ |- images/ |- index.html |- js/ |- scss/ |- dist/ |- gulpfile.js |- node_modules/ |- package.json

Nesta estrutura, usaremos a pasta app para fins de desenvolvimento, enquanto a pasta dist (como em “distribuição”) é usada para conter arquivos otimizados para o site de produção.

Desde que app seja usado para fins de desenvolvimento, todo o nosso código será colocado em app.

Temos que manter esta estrutura de pastas em mente quando trabalharmos nas nossas configurações do Gulp. Agora, vamos começar por criar a sua primeira tarefa Gulp em gulpfile.js, que armazena todas as configurações Gulp.

Escrevendo sua primeira tarefa Gulp

O primeiro passo para usar o Gulp é para require no arquivo gulp. 

var gulp = require('gulp');

O comando require diz ao Node para olhar para a pasta node_modules para um pacote chamado gulp. Uma vez encontrado o pacote, atribuímos o seu conteúdo à variável gulp.

Agora podemos começar a escrever uma tarefa gulp com esta variável gulp. A sintaxe básica de uma tarefa gulp é:

gulp.task('task-name', function() { // Stuff here});

task-name refere-se ao nome da tarefa, que seria usada sempre que você quisesse executar uma tarefa no Gulp. Você também pode executar a mesma tarefa na linha de comando, escrevendo gulp task-name.

Para testar, vamos criar uma tarefa hello que diz Hello Zell!. 

gulp.task('hello', function() { console.log('Hello Zell');});

Podemos executar esta tarefa com gulp hello na linha de comando. 

$ gulp hello

A linha de comando irá retornar um log que diz Hello Zell!.

As tarefas de engolir são normalmente um pouco mais complexas do que isto. Normalmente contém dois métodos adicionais de Gulp, mais uma variedade de plugins de Gulp.

Aqui está como uma tarefa real pode parecer:

Como você pode ver, uma tarefa real contém dois métodos adicionais de Gulp – gulp.src e gulp.dest.

gulp.src diz à tarefa Gulp quais arquivos usar para a tarefa, enquanto que gulp.dest diz ao Gulp onde sair os arquivos uma vez que a tarefa esteja concluída.

Vamos tentar construir uma tarefa real onde compilamos arquivos Sass em arquivos CSS.

Pré-processamento com Gulp

Podemos compilar Sass to CSS em Gulp com a ajuda de um plugin chamado gulp-sass. Você pode instalar o gulp-sass em seu projeto usando o comando npm install como nós fizemos para gulp.

Também queremos usar a bandeira --save-dev para garantir que o gulp-sass seja adicionado a devDependencies em package.json. 

$ npm install gulp-sass --save-dev

Temos que require gulp-sass da pasta node_modules tal como fizemos com gulp antes de podermos usar o plugin. 

var gulp = require('gulp');// Requires the gulp-sass pluginvar sass = require('gulp-sass');

Podemos usar o gulp-sass substituindo aGulpPlugin() por sass(). Uma vez que a tarefa é para compilar o Sass em CSS, vamos nomeá-lo sass. 

gulp.task('sass', function(){ return gulp.src('source-files') .pipe(sass()) // Using gulp-sass .pipe(gulp.dest('destination'))});

Temos de fornecer a tarefa sass com ficheiros-fonte e um destino para a tarefa funcionar, por isso vamos criar um ficheiro styles.scss na pasta app/scss. Este ficheiro será adicionado à tarefa sass em gulp.src.

>

Queremos enviar o eventual arquivo styles.css para a pasta `app/css`, que seria o destination para gulp.dest.

Queremos testar que a tarefa sass está a funcionar como queremos. Para o fazer, podemos adicionar uma função Sass dentro de styles.scss. 

// styles.scss.testing { width: percentage(5/7);}

Se executar gulp sass na linha de comando, deverá agora poder ver que foi criado um ficheiro styles.css em app/css. Além disso, ele tem o código onde percentage(5/7) foi avaliado em 71.42857%. 

/* styles.css */.testing { width: 71.42857%; }

É assim que sabemos que a tarefa sass funciona!

Por vezes precisamos da capacidade de compilar mais do que um .scss ficheiro em CSS no mesmo. Podemos fazer isso com a ajuda de Node globs.

FYI: Gulp-sass usa LibSass para converter Sass em CSS. É muito mais rápido que os métodos baseados em Ruby. Se você quiser, você ainda pode usar métodos Ruby com Gulp usando gulp-ruby-sass ou gulp-compass em vez disso.

Globbing in Node

Globs são padrões correspondentes para arquivos que permitem adicionar mais de um arquivo em gulp.src. É como expressões regulares, mas especificamente para caminhos de arquivos.

Quando você usa um glob, o computador verifica os nomes dos arquivos e caminhos para o padrão especificado. Se o padrão existe, então um arquivo é correspondido.

Os fluxos de trabalho com o Gulp tendem a requerer apenas 4 padrões de globbing diferentes:

  1. *.scss: O padrão * é um wildcard que combina com qualquer padrão no diretório atual. Neste caso, estamos combinando qualquer arquivo terminando com .scss na pasta raiz (project).
  2. **/*.scss: Esta é uma versão mais extrema do padrão * que combina com qualquer arquivo terminando com .scss na pasta raiz e quaisquer diretórios infantis.
  3. !not-me.scss: O ! indica que o Gulp deve excluir o padrão de suas combinações, o que é útil se você tiver que excluir um arquivo de um padrão combinado. Neste caso, not-me.scss seria excluído da combinação.
  4. *.+(scss|sass): O mais + e parênteses () permite que o Gulp combine vários padrões, com padrões diferentes separados pelo caractere do cano |. Neste caso, o Gulp irá combinar qualquer ficheiro que termine com .scss ou .sass na pasta raiz.

Qualquer outro ficheiro Sass que seja encontrado dentro de app/scss seria automaticamente incluído na tarefa sass com esta alteração. Se adicionar um ficheiro print.scss ao projecto, verá que print.css será gerado em app/css.

Conseguimos agora compilar todos os ficheiros Sass em ficheiros CSS com um único comando. A questão é, de que serve se tivermos que executar gulp sass manualmente toda vez que quisermos compilar Sass em CSS?

Felizmente, podemos dizer ao Gulp para correr automaticamente a tarefa sass sempre que um ficheiro é guardado através de um processo chamado “watching” (a observar).

Observar ficheiros Sass para alterações

Nota! Gulp Watch foi uma das coisas que mudou muito de 3.x para 4.x. Veja os docs.

Gulp nos fornece um método watch que verifica se um arquivo foi salvo. A sintaxe para o método watch é: 

// Gulp watch syntaxgulp.watch('app/scss/**/*.scss', );

Mais frequentemente, porém, vamos querer ver mais do que um tipo de ficheiro ao mesmo tempo. Para isso, podemos agrupar múltiplos processos de observação em uma tarefa watch: 

gulp.task('watch', function(){ gulp.watch('app/scss/**/*.scss', ); // Other watchers})

Se você executar o comando gulp watch agora mesmo, verá que o Gulp começa a observar imediatamente.

E que corre automaticamente a tarefa sass sempre que guarda um ficheiro .scss.

Vamos dar um passo à frente e fazer o Gulp recarregar o browser sempre que guardarmos um ficheiro .scss com a ajuda do Browser Sync.

Live-reloading com o Browser Sync

Browser Sync ajuda a tornar o desenvolvimento web mais fácil ao rodar um servidor web que nos ajuda a fazer o live-reload facilmente. Ele tem outras características, como sincronizar ações em múltiplos dispositivos também.

Primeiro temos de instalar o Browser Sync: 

$ npm install browser-sync --save-dev

Talvez tenha reparado que não existe um prefixo gulp- quando instalamos o Browser Sync. Isto é porque o Browser Sync funciona com o Gulp, por isso não temos de usar um plugin.

Para usar o Browser Sync, teremos que require Browser Sync.

var browserSync = require('browser-sync').create();

Precisamos criar uma tarefa browserSync para habilitar o Gulp a rodar um servidor usando o Browser Sync. Já que estamos rodando um servidor, precisamos deixar o Browser Sync saber onde a raiz do servidor deve estar. No nosso caso, é a pasta `app`:

gulp.task('browserSync', function() { browserSync.init({ server: { baseDir: 'app' }, })})

Tambem temos de alterar ligeiramente a nossa sass task para que o Browser Sync possa injectar novos estilos CSS (actualizar o CSS) no browser sempre que a sass task for executada.

Acabamos com a configuração de Sincronização do Navegador. Agora, temos de executar as tarefas watch e browserSync ao mesmo tempo para que o carregamento ao vivo ocorra.

Será complicado abrir duas janelas de linha de comando e executar gulp browserSync e gulp watch separadamente, então vamos fazer o Gulp executá-los juntos dizendo à tarefa watch que browserSync deve ser completada antes que watch seja permitido executar.

Podemos fazer isso adicionando um segundo argumento à tarefa watch. A sintaxe é: 

gulp.task('watch', , function (){ // ...})

E neste caso estamos a adicionar a tarefa browserSync. 

gulp.task('watch', , function (){ gulp.watch('app/scss/**/*.scss', ); // Other watchers})

Também vamos querer ter a certeza que sass corre antes de watch pelo que o CSS já será o mais recente sempre que executarmos um comando Gulp. 

gulp.task('watch', , function (){ gulp.watch('app/scss/**/*.scss', ); // Other watchers});

Agora, se correr gulp watch na linha de comandos, o Gulp deverá iniciar as tarefas sass e browserSync ao mesmo tempo. Quando ambas as tarefas estiverem concluídas, watch será executado.

Ao mesmo tempo, uma janela do navegador que aponta para app/index.html também apareceria. Se você alterar o arquivo styles.scss, você verá que o navegador é recarregado automaticamente.

Há mais uma coisa antes de terminarmos esta secção de recarga ao vivo. Como já estamos atentos a .scss ficheiros para recarregar, porque não dar mais um passo e recarregar o browser se algum ficheiro HTML ou JavaScript for guardado?

Podemos fazê-lo adicionando mais dois processos de watch, e chamando a função browserSync.reload quando um ficheiro é guardado:

Até agora, neste tutorial, já tratámos de três coisas:

  1. Spinning up a web server for development
  2. Using the Sass preprocessor
  3. Reloading the browser whenever a file is saved

Vamos cobrir a parte sobre otimização de ativos na próxima seção. Vamos começar com a otimização de arquivos CSS e JavaScript.

Otimização de arquivos CSS e JavaScript

Os desenvolvedores têm duas tarefas a realizar quando tentamos otimizar arquivos CSS e JavaScript para produção: minificação e concatenação.

Um problema que os desenvolvedores enfrentam ao automatizar este processo é que é difícil concatenar seus scripts na ordem correta.

Dizemos que incluímos 3 tags de scripts em index.html.

Estes scripts estão localizados em dois diretórios diferentes. Será difícil concatená-los com plugins tradicionais como o gulp-concatenate.

Felizmente, existe um útil plugin Gulp, gulp-useref, que resolve este problema.

Gulp-useref concatena qualquer número de ficheiros CSS e JavaScript num único ficheiro, procurando um comentário que comece com “<!-build:” e termine com “<!-endbuild->”. A sua sintaxe é: 

<!-- build:<type> <path> -->... HTML Markup, list of script / link tags.<!-- endbuild -->

<type> pode ser js, css, ou remove. É melhor definir type para o tipo de arquivo que você está tentando concatenar. Se você definir type para remove, o Gulp removerá todo o bloco de construção sem gerar um arquivo.

<path> aqui refere-se ao caminho de destino do ficheiro gerado.

Queremos que o ficheiro final JavaScript seja gerado na pasta js, como main.min.js. Portanto, o markup seria:

Agora vamos configurar o plugin gulp-useref no ficheiro gulp. Teremos que instalar o plugin e requerê-lo no arquivo gulp.

$ npm install gulp-useref --save-dev
var useref = require('gulp-useref');

Configurar a tarefa useref é similar às outras tarefas que fizemos até agora. Aqui está o código: 

gulp.task('useref', function(){ return gulp.src('app/*.html') .pipe(useref()) .pipe(gulp.dest('dist'))});

Agora se você executar esta useref tarefa, o Gulp irá executar através das 3 tags de script e concatená-las em dist/js/main.min.js.

O ficheiro, no entanto, não está minificado neste momento. Nós teremos que usar o plugin gulp-uglify para ajudar na minificação de arquivos JavaScript. Também precisamos de um segundo plugin chamado gulp-if para garantir que só tentamos minificar arquivos JavaScript. 

$ npm install gulp-uglify --save-dev

Gulp deve agora automaticamente minificar o ficheiro `main.min.js` sempre que executar a tarefa useref.

Uma coisa boa que eu ainda tenho que revelar com o Gulp-useref é que ele altera automaticamente todos os scripts dentro de “<!-build:” e “<!-endbuild->” em um único arquivo JavaScript que aponta para `js/main.min.js`.

Maravilhoso, não é?

Podemos usar o mesmo método para concatenar qualquer arquivo CSS (se você decidiu adicionar mais de um) também. Vamos seguir o mesmo processo e adicionar um comentário build.

Também podemos minificar o arquivo CSS concatenado. Precisamos usar um pacote chamado gulp-cssnano plugin para nos ajudar com a minificação.

$ npm install gulp-cssnano

Agora você obteria um arquivo CSS otimizado e um arquivo JavaScript otimizado sempre que você executasse a tarefa useref.

Vamos avançar e optimizar as imagens a seguir.

Otimizando Imagens

Você provavelmente já deve ter adivinhado; precisamos usar gulp-imagemin para nos ajudar com a otimização de imagens.

$ npm install gulp-imagemin --save-dev
var imagemin = require('gulp-imagemin');

Podemos minificar png, jpg, gif e até svg com a ajuda de gulp-imagemin. Vamos criar uma tarefa images para este processo de optimização. 

gulp.task('images', function(){ return gulp.src('app/images/**/*.+(png|jpg|gif|svg)') .pipe(imagemin()) .pipe(gulp.dest('dist/images'))});

Desde que diferentes tipos de ficheiros possam ser optimizados de forma diferente, poderá querer adicionar opções a imagemin para personalizar a forma como cada ficheiro é optimizado.

Por exemplo, você pode criar GIFs entrelaçados definindo a chave de opção interlaced para true.

Você pode brincar com outras opções se você quiser também.

Optimizar imagens, no entanto, é um processo extremamente lento que você não iria querer repetir, a menos que seja necessário. Para fazer isso, podemos usar o plugin gulp-cache.

$ npm install gulp-cache --save-dev

Estamos quase a terminar o processo de optimização. Há mais uma pasta que precisamos transferir do diretório `app’ para o diretório `dist’, o diretório de fontes. Vamos fazer isso agora.

Copiar Fontes para Dist

Desde que os ficheiros de fontes já estejam optimizados, não há mais nada que precisemos de fazer. Tudo o que temos de fazer é copiar as fontes para dist.

Podemos copiar arquivos com o Gulp simplesmente especificando o gulp.src e gulp.dest sem nenhum plugin.

gulp.task('fonts', function() { return gulp.src('app/fonts/**/*') .pipe(gulp.dest('dist/fonts'))})

Agora o Gulp irá copiar `fonts` de `app` para `dist` sempre que você executar gulp fonts.

Temos agora 6 tarefas diferentes no ficheiro gulp, e cada uma delas tem de ser chamada individualmente com a linha de comandos, o que é um pouco complicado, por isso queremos ligar tudo num só comando.

Antes de fazermos isso, vamos ver como limpar automaticamente os arquivos gerados.

Limpar os ficheiros gerados automaticamente

Desde que estejamos a gerar ficheiros automaticamente, vamos querer ter a certeza que os ficheiros que já não são utilizados não ficam em lado nenhum sem nós sabermos.

Este processo chama-se limpeza (ou, em termos mais simples, apagar ficheiros).

Teremos que usar del para nos ajudar na limpeza. 

npm install del --save-dev
var del = require('del');

A função del leva um array de globos de nós que diz quais pastas apagar.

Configurá-lo com uma tarefa Gulp é quase como o primeiro exemplo de “olá” que tivemos. 

gulp.task('clean:dist', function() { return del.sync('dist');})

Agora o Gulp irá apagar a pasta `dist` para você sempre que gulp clean:dist for executado.

Nota: Não temos de nos preocupar em apagar a pasta dist/images porque o gulp-cache já guardou os caches das imagens no seu sistema local.

Para limpar os caches do seu sistema local, você pode criar uma tarefa separada que se chama `cache:clear`

gulp.task(‘cache:clear’, function (callback) {
return cache.clearAll(callback)
})

Phew, isso é uma boca cheia. Vamos combinar agora todas as nossas tarefas!

Combinando tarefas Gulp

Vamos resumir o que fizemos. Até agora, criámos dois conjuntos distintos de tarefas Gulp.

O primeiro conjunto é para um processo de desenvolvimento, onde compilamos Sass para CSS, observamos as mudanças e recarregamos o navegador de acordo.

O segundo conjunto é para um processo de otimização, onde preparamos todos os arquivos para o site de produção. Nós otimizamos ativos como CSS, JavaScript e imagens neste processo e copiamos fontes de app a dist.

Já agrupamos o primeiro conjunto de tarefas em um fluxo de trabalho simples com o comando gulp watch: 

gulp.task('watch', , function (){ // ... watchers})

O segundo conjunto consiste em tarefas que precisamos executar para criar o site de produção. Isto inclui clean:dist, sass, useref, images e fonts.

Se seguíssemos o mesmo raciocínio, poderíamos criar uma tarefa build para combinar tudo junto. 

gulp.task('build', , function (){ console.log('Building files');})

Felizmente, não seríamos capazes de escrever a build tarefa desta forma porque o Gulp activa todas as tarefas no segundo argumento simultaneamente.

Existe a possibilidade de useref, images, ou mesmo fonts ser completada antes de clean, o que significa que toda a pasta `dist` é apagada.

Assim, para garantir que a limpeza seja completada antes do resto das tarefas, precisamos usar um plugin extra chamado Run Sequence.

$ npm install run-sequence --save-dev

Aqui está a sintaxe de uma sequência de tarefas com sequência de execução:

Quando task-name é chamado, o Gulp irá executar task-one primeiro. Quando task-one termina, Gulp irá iniciar automaticamente task-two. Finalmente, quando task-two estiver completo, o Gulp irá executar task-three.

Run Sequence também lhe permite executar tarefas simultaneamente se as colocar num array: 

gulp.task('task-name', function(callback) { runSequence('task-one', , 'task-three', callback);});

Neste caso, o Gulp executa primeiro task-one. Quando task-one é completado, o Gulp executa todas as tarefas no segundo argumento simultaneamente. Todas as tarefas neste segundo argumento devem ser completadas antes que task-three seja executado.

Então agora podemos criar uma tarefa que garanta que clean:dist corra primeiro, seguida por todas as outras tarefas:

gulp.task('build', function (callback) { runSequence('clean:dist', , callback )})

Para tornar as coisas consistentes, também podemos construir a mesma sequência com o primeiro grupo. Vamos usar default como o nome da tarefa desta vez: 

gulp.task('default', function (callback) { runSequence(, callback )})

Porquê default? Porque quando você tem uma tarefa chamada default, você pode executá-la simplesmente digitando o comando gulp, que salva algumas teclas.

Finalmente, aqui está um repo do github para todo o trabalho que fizemos!

Embrulhando-o

Passamos pelo básico absoluto do Gulp e criamos um fluxo de trabalho que é capaz de compilar o Sass em CSS enquanto observa os arquivos HTML e JS para alterações ao mesmo tempo. Podemos executar esta tarefa com o comando gulp na linha de comando.

Também construímos uma segunda tarefa, build, que cria uma pasta dist para o site de produção. Nós compilamos Sass em CSS, otimizamos todos os nossos recursos e copiamos as pastas necessárias para a pasta dist. Para executar esta tarefa, basta digitar gulp build na linha de comando.

Por último, temos uma tarefa clean que limpa da pasta gerada dist quaisquer caches de imagens que são criadas, permitindo-nos remover quaisquer arquivos antigos que foram inadvertidamente mantidos em dist.

Criamos um fluxo de trabalho robusto até agora que é capaz o suficiente para a maioria dos desenvolvedores web. Há muito mais para o Gulp e fluxos de trabalho que podemos explorar para tornar este processo ainda melhor. Aqui estão algumas idéias para você:

Para desenvolvimento:

  • Utilizar o Autoprefixer para escrever código CSS livre de fornecedores
  • Adicionar Sourcemaps para facilitar a depuração
  • Criar Sprites com sprity
  • Compilar apenas ficheiros que tenham mudado com o gulp-changed
  • Escrever ES6 com Babel ou Traceur
  • Modularizar ficheiros Javascript com o Browserify, webpack, ou jspm
  • Modularizar HTML com motores de templates como Handlebars ou Swig
  • Dividir o ficheiro gulp em ficheiros mais pequenos com require-dir
  • Gerar um script Modernizr automaticamente com gulp-modernizr

Para optimização:

  • Remover CSS não utilizado com unCSS
  • Outra optimização de CSS com CSSO
  • Gerar CSS em linha para performance com o Critical

Além de processos de desenvolvimento ou optimização, também pode adicionar testes de unidade de escrita JavaScript com gulp-jasmine e até mesmo implementar a sua pasta dist no seu servidor de produção automaticamente com gulp-rync.

Como você pode ver, mesmo que o fluxo de trabalho que criamos faça algumas coisas, há muito mais que pode ser feito. Criar um fluxo de trabalho adequado às suas necessidades pode ser extremamente excitante e gratificante, mas pode ser muito para absorver se você é novo nisso.

Há muito mais para o Gulp que é impossível cobrir dentro deste post no blog, ou mesmo uma série de posts. É por isso que eu escrevi um livro sobre a automatização do seu fluxo de trabalho, e convido-o a pegar dez capítulos de graça se estiver interessado em saber mais 🙂

Leave a Reply