Começando com o Gulp.js

Gulp é uma ferramenta baseada em Javascript que permite automatizar partes do seu fluxo de trabalho. A automação pode literalmente economizar horas por dia. Se você é um desenvolvedor ou designer que cria wireframes HTML de vez em quando, recomendo.

Neste artigo, veremos os fundamentos do uso do Gulp - da instalação à sintaxe básica e alguns exemplos. No final do artigo, você deve ser capaz de encontrar, instalar e usar pacotes que outros criaram para o Gulp para compilar o SASS, otimizar imagens, criar sprites, concatenar arquivos e muito mais!

Instalando Gulp

Não se preocupe, a instalação é muito fácil. Precisamos usar o terminal no OSX e no Linux ou o prompt de comando do Windows. Eu vou estar me referindo a isso como Terminal a partir de agora.

Abra e digite npm -v e pressione enter. Se você ver o número da versão exibida, você já tem o Node instalado - isso é uma dependência do Gulp.

Se você receber um “comando não encontrado” (ou um erro semelhante), vá até a página de downloads do Node.js e selecione o pacote apropriado para o seu sistema. Uma vez instalado, o comando npm estará disponível no terminal.

Instalar o Gulp é tão fácil. Cole o seguinte comando no terminal, é isso:

npm install --glutal gole

Isto irá instalar o comando Gulp, que estará disponível globalmente no seu sistema.

Adicionando Gulp To A Project

O Gulp agora está instalado, mas precisaremos adicioná-lo a cada projeto para o qual precisamos, separadamente. Crie uma pasta vazia agora e navegue até ela no seu terminal. Enquanto na pasta do projeto, use o seguinte comando:

npm install --save-dev gole

Isso deve criar uma pasta node_modules e um arquivo npm-debug.log na pasta do seu projeto. Estes são usados ​​pelo Gulp para fazer o seu projeto, você não precisa pensar neles nesta fase.

A razão pela qual precisamos adicionar o Gulp a cada projeto específico é que cada projeto tem requisitos diferentes. Um pode pedir SASS, outro por menos. Pode-se usar o Coffeescript, o outro não, e assim por diante.

O Gulpfile

O Gulpfile é onde a mágica acontece, é onde você define as automações que você precisa e quando você quer que eles aconteçam. Vamos criar uma tarefa padrão vazia, criando um arquivo chamado gulpfile.js e colando o seguinte código nele.

var gulp = require ('gulp'); gulp.task ('default', function () // Isso não faz nada por enquanto, adicionaremos funcionalidade em breve);

Uma vez que este arquivo é salvo, você pode voltar para o seu terminal e executar o comando gulp por conta própria. Gulp detecta em qual projeto está e executa a tarefa padrão - aquela que acabamos de criar. Você deveria ver algo assim:

Nada realmente acontece aqui, já que a tarefa está vazia, mas está funcionando bem. Agora vamos começar com alguns exemplos apropriados!

Copiando um arquivo

Isso é chato, eu vou admitir isso, mas vai ajudar você a entender o que está acontecendo facilmente.

Na pasta do seu projeto, crie um arquivo chamado to_copy.txt , e uma pasta chamada dev. Vamos entrar no nosso Gulpfile e criar uma nova tarefa chamada cópia de.

gulp.task ('copy', function () retornar gulp.src ('to_copy.txt') .pipe (gulp.dest ('dev')););

A primeira linha define uma tarefa que é chamada de cópia. Dentro disso, usamos gulp.src para especificar quais arquivos estamos almejando com esta tarefa - neste caso, é um único arquivo chamado to_copy.txt.

Nós então canalizamos esses arquivos para a função gulp.dest que especifica onde queremos colocar esses arquivos - eu usei o diretório dev.

Volte para o seu terminal e digite cópia gulp para executar esta tarefa, deve copiar o arquivo especificado para o diretório especificado, algo como isto:

O comando pipe está no coração do Gulp. É uma maneira eficiente de mover dados entre comandos. O comando src especifica os arquivos que são canalizados para o comando dest. Em cenários mais complexos, enviamos nossos arquivos para outros comandos antes de especificar um destino.

Você também deve estar ciente de que a origem pode ser fornecida como um único arquivo ou vários arquivos. Se nós temos uma pasta chamada Produção e queremos mover todos os arquivos do nosso desenvolvimento pasta para ele, poderíamos usar o seguinte comando:

gulp.task ('copy', function () return gulp.src ('desenvolvimento / *') .pipe (gulp.dest ('produção')););

O caractere de estrela corresponderá a qualquer coisa dentro do diretório. Você também pode combinar todos os arquivos em todos os subdiretórios e fazer todos os tipos de correspondência de fantasia. Dê uma olhada na documentação do node-glob para mais informações.

Compilando o SASS

Compilar uma folha de estilo a partir de arquivos SASS é uma tarefa comum para desenvolvedores. Isso pode ser feito com o Gulp facilmente, mas precisamos fazer alguma preparação. Além dos comandos básicos, como src, dest e vários outros, toda a funcionalidade é adicionada por meio de complementos de terceiros. Aqui está como eu vou usá-los.

Eu digito SASS Gulp no Google, o primeiro resultado é geralmente o que eu preciso, você deve encontrar a página para o pacote SASS. Mostra como instalá-lo (npm install gulp-sass). É provável que você precise usar o sudo para instalá-lo como administrador, então provavelmente será (sudo npm install gulp-sass) .

Uma vez feito, você pode usar a sintaxe que o pacote determina para compilar seu código. Para fazer isso, crie um arquivo chamado styles.scss com o seguinte conteúdo:

$ primary: # ff9900; body background: $ primário; 

Agora crie a seguinte tarefa Gulp no Gulpfile.

gulp.task ('sass', função () gulp.src ('*. scss') .pipe (sass ()) .pipe (gulp.dest ('./ css')););

Antes de executar o comando, não se esqueça de 'exigir' o pacote no topo do Gulpfile assim:

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

Quando você correr gole sass, todos os arquivos com a extensão scss serão canalizados para a função sass, que irá convertê-los em css. Estes são então canalizados para a função de destino que os coloca na pasta css.

Assistindo arquivos e pastas

Até agora tudo isso é útil, mas ainda precisamos digitar um comando cada vez queremos executar uma tarefa, o que não é muito eficiente, especialmente quando se trata de alterações na folha de estilo. O Gulp permite que você observe arquivos para mudanças e execute comandos automaticamente.

No Gulpfile, crie um comando chamado automatizar que usará o comando watch para assistir a um conjunto de arquivos para alterações e executar um comando específico quando um arquivo for alterado.

gulp.task ('automatizar', função () gulp.watch ('*. scss', ['sass']););

Se você digitar gole automatizar no terminal, ele iniciará e concluirá a tarefa, mas não retornará ao prompt porque está monitorando as alterações. Nós especificamos que queremos assistir todos os arquivos scss no diretório raiz e, se eles mudarem, queremos executar o comando sass que configuramos anteriormente.

Se você agora mudar o seu arquivo style.scss, ele deve ser compilado para o arquivo css dentro do diretório css automaticamente.

Executando Múltiplas Tarefas

Existem muitas situações em que você pode querer executar várias tarefas. Ao assistir a sua pasta javascript você pode querer compilar concatenar dois arquivos e depois proceder para minimizá-los. Existem duas maneiras de fazer isso.

Se as tarefas estão relacionadas, eu gosto de acorrentá-los. Um bom exemplo seria a concatenação e a minimização de arquivos javascript. Primeiro, enviamos nossos arquivos para a ação de concat, depois os enviamos para gulp-uglify e, em seguida, usamos a função de destino para gerá-los.

Se as tarefas não estiverem relacionadas, você pode chamar várias tarefas. Um exemplo seria uma tarefa em que queremos concatenar e minificar nossos scripts e também compilar nosso SASS. Aqui está ele Gulpfile completo de como isso ficaria.

var gulp = require ('gulp'); var uglify = require ('gulp-uglify'); var concat = require ('gulp-concat'); var sass = require ('gulp-sass'); gulp.task ('scripts', função () gulp.src ('js / ** / * js') .pipe (concat ('scripts.js')) .pipe (gulp.dest ('.') ) .pipe (uglify ()) .pipe (gulp.dest ('.'))); gulp.task ('estilos', função () gulp.src ('/ * .ssss') .pipe (sass ()) .pipe (gulp.dest ('./ css'));); gulp.task ('automatizar', função () gulp.watch (['*. scss', 'js / ** / *. js'], ['scripts', 'estilos']);); gulp.task ('default', ['scripts', 'styles']);

Se você digitar gulp scripts no terminal, todos os arquivos javascript dentro do diretório js serão concatenados, serão enviados para o diretório principal, então serão uglificados e salvos no diretório principal.

Se você digitar gole sass, todos os seus arquivos scss serão compilados e salvos no diretório css.

Se você digitar gole (a tarefa padrão), o seu roteiros tarefa será executada, seguida pela sua Estilos tarefa.

o gole automatizar A tarefa observa várias pastas para alterações em nossos arquivos scss e js e executará as duas tarefas que definimos, se uma alteração for detectada.

visão global

Usar o Gulp não é difícil, na verdade, muitas pessoas preferem o Grunt devido à sua sintaxe mais simples. Lembre-se dos passos a seguir ao criar uma nova automação:

• Pesquisar por plugin
• Instalar plugin
• Requer plugin em seu Gulpfile
• Use a sintaxe na documentação

Os cinco comandos disponíveis no Gulp (task, run, watch, src, dest) são os únicos que você precisa saber, todos os addons de terceiros possuem uma ótima documentação. Aqui está uma lista de algumas coisas que eu uso com as quais você poderia começar agora:

• Otimizando imagens com otimização de imagem de gulp
• Criando sprites de imagem com gulp-sprite
• Concatenando arquivos com gulp-concat
• Minificando arquivos com gulp-uglify
• Excluindo arquivos com gulp-del
• Javascript linting com gulp-jslint
• JSON linting com gulp-jsonlint
• Autoprefix CSS com gulp-autoprefixer
• Pesquise e substitua usando gulp-frep
• Reduza o CSS com gulp-minify-css