9.1 KiB
title | localeTitle |
---|---|
Learn Some Gulp Basics | Aprenda alguns princípios básicos do Gulp |
Gulp pode fazer muito . Esta é apenas uma visão geral do básico. Depois de entender isso, você pode adicionar mais ao Gulp por conta própria. A documentação para diferentes pacotes que usei tem sido ótima e também temos uma grande comunidade no FreeCodeCamp pronta para ajudar com qualquer projeto.
O que é o Gulp?
Gulp é um corredor de criação / tarefa em JavaScript. Você está usando Jade, mas precisa de HTML? Sass, mas precisa de CSS? CoffeeScript, mas precisa de JavaScript? Ou talvez você só queira concatenar e / ou minimizar o que você já tem? Gulp pode fazer tudo isso facilmente, então você não precisa voltar ao seu terminal após cada pequena mudança.
Por que usar Gulp?
Nós usamos muito CodePen no FreeCodeCamp. CodePen permite o uso de pré-processadores sem ter que fazer mais nada. Você pode ver a versão compilada se um pré-processador foi usado. Parece muito diferente. Você pode fazer um projeto no React on CodePen, escolher o Babel como o pré-processador do JavaScript e tudo funcionará. Se você fizesse esse mesmo projeto localmente sem processar tudo, não conseguiria o que esperava. É aqui que entra o Gulp.
Como faço para usar o Gulp?
Mais uma vez, esta é apenas uma visão geral do básico. A visão geral vai processar Sass para CSS, concatenando e diminuindo folhas de estilo e scripts, e implementando Gulp watch. Você precisa do Node e do NPM instalados no seu computador antes de fazer qualquer coisa. Você provavelmente já tem isso, mas insira o node -v
e npm -v
em seu terminal para verificar.
-
Mude para o diretório do projeto e execute
npm init
no terminal.-
Isso cria o arquivo
package.json
no diretório de trabalho. -
Este também seria um bom momento para executar o
touch .gitignore
no terminal e adicionarnode_modules/
no arquivo, assim você não estará empurrando todos esses pacotes para o GitHub.
-
-
Execute
npm install --save-dev gulp gulp-concat gulp-minify-css gulp-rename gulp-sass gulp-uglify
no terminal. Isso pode levar alguns minutos para terminar.-
Isso está instalando 6
node_modules
diferentes. Você pode dar uma olhada no arquivopackage.json
e ver todos esses listados emdevDependencies
e na pastanode_modules
e ver cada pacote que você instalou. -
gulp-concat
é para concatenar folhas de estilo e scripts,gulp-minify-css
é para diminuir o CSS,gulp-rename
é para renomear o arquivo,gulp-sass
é para Sass para CSS, egulp-uglify
é para diminuir o JS.
-
-
Execute o
touch gulpfile.js
no terminal.- Agora você está pronto para começar.
-
Você precisará exigir todos os arquivos que acabou de salvar. Você faz isso em
gulpfile.js
.
'use strict';
var gulp = require('gulp');
var concat = require('gulp-concat');
var minifyCss = require('gulp-minify-css');
var rename = require('gulp-rename');
var sass = require('gulp-sass');
var uglify = require('gulp-uglify');
-
Nós precisamos começar em algum lugar, então Sass para CSS primeiro? Aqui vamos processar Sass para CSS, diminuir o CSS e renomear o arquivo.
-
O nome da tarefa
sass
(mais sobre isso depois). -
No diretório atual, estamos procurando por uma pasta chamada
assets
, em seguida, uma pasta chamadascss
, em seguida, um arquivo chamadomain.scss
. -
Estamos processando o Sass para CSS e registrando se ocorrer um erro.
-
O CSS é então reduzido. Isso é apenas livrar-se de todas essas linhas e espaços extras. O computador não precisa deles para ler o arquivo e reduz drasticamente o tamanho do arquivo.
-
Como o arquivo agora está reduzido, faz sentido renomeá-lo
.min.css
. -
O último passo é salvar o arquivo
main.min.css
algum lugar e ele está indo no diretório atual para uma pasta chamadapublic
, em seguida, uma pasta chamadacss
.
-
gulp.task('sass', function() {
return gulp.src('./assets/scss/main.scss')
.pipe(sass().on('error', sass.logError))
.pipe(minifyCss({compatibility: 'ie8'}))
.pipe(rename('main.min.css'))
.pipe(gulp.dest('./public/css'));
});
-
Agora podemos entrar um pouco mais no Gulp e tentar concatenar e diminuir todos os arquivos de script. E se você tiver apenas um script agora, então você não tem nada para concatenar? Talvez se livre de algumas das CDNs que você possui e faça scripts. Mas você chegará a projetos maiores que possuem vários scripts.
-
Por favor, note que eu não estou cobrindo mapas de origem. Eu acho que esse é o próximo passo após esta visão geral básica, então olhe para lá depois de entender o que você está fazendo aqui.
-
As tarefas atuais são nomeadas
concatScripts
eminifyScripts
. -
Essa é a mesma estrutura básica do
sass
. Todos os arquivos são adicionados aogulp.src
, mas primeiro precisamos salvar esse arquivo concatenado antes que ele seja reduzido. -
A redução do JavaScript é chamada de
uglify
. -
Você percebe
['concatScripts]
apósminifyScripts
? Isso significa que oconcatScripts
será executado primeiro toda vez que tentarmos executar ominifyScripts
.
-
gulp.task('concatScripts', function() {
return gulp.src([
'./assets/js/script-1.js',
'./assets/js/script-2.js',
'./assets/js/script-3.js'
])
.pipe(concat('app.js'))
.pipe(gulp.dest('./assets/js'));
});
gulp.task('minifyScripts', ['concatScripts'], function() {
return gulp.src('assets/js/app.js')
.pipe(uglify())
.pipe(rename('app.min.js'))
.pipe(gulp.dest('public/app/js'));
});
-
Agora você pode ir para o terminal e digitar
gulp sass
e / ougulp minifyScripts
. Isso executará cada um deles, mas queremos facilitar para nós. Nós vamos fazer uma compilação padrão, então nós podemos apenas inserirgulp
no terminal. Nós também vamos adicionar ogulp watch
, então sempre que você salvar um arquivo listado no relógio, ele executará o que você disse para ele rodar.-
Nós fizemos uma tarefa chamada
build
. Isso é muito parecido com ominifyScripts
já que existe um array nele. Sempre que entramos nogulp build
no terminal, ele executasass
eminifyScripts
(que, na verdade, executaconcatScripts
primeiro). -
Também fizemos uma tarefa chamada
watch
. Esta é a tarefa de economia de tempo. No terminal você executagulp watch
. Gulp permanecerá aberto no terminal, então você provavelmente desejará executá-lo em outra guia. Sempre que um arquivo é atualizado e salvo na pastascss
com uma extensão.scss
a tarefasass
será executada. E a mesma coisa para um arquivo na pastajs
com uma extensão.js
, masconcatScripts
eminifyScripts
serão executados. -
A última tarefa é
default
. Você pode simplesmente executargulp
no terminal e ele executará a tarefadefault
. A tarefadefault
aqui é chamar a tarefa debuild
, que apenas executa todas as tarefas que temos na página.
-
gulp.task('build', ['sass', 'minifyScripts']);
gulp.task('watch', function() {
gulp.watch('./assets/scss/**/*.scss', ['sass']);
gulp.watch('./assets/js/**/*.js', ['minifyScripts']);
});
gulp.task('default', ['build']);
É assim que o seu arquivo gulpfile.js
final deve ser:
'use strict';
var gulp = require('gulp');
var concat = require('gulp-concat');
var minifyCss = require('gulp-minify-css');
var rename = require('gulp-rename');
var sass = require('gulp-sass');
var uglify = require('gulp-uglify');
gulp.task('sass', function() {
return gulp.src('./assets/scss/main.scss')
.pipe(sass().on('error', sass.logError))
.pipe(minifyCss({compatibility: 'ie8'}))
.pipe(rename('main.min.css'))
.pipe(gulp.dest('./public/css'));
});
gulp.task('concatScripts', function() {
return gulp.src([
'./assets/js/script-1.js',
'./assets/js/script-2.js',
'./assets/js/script-3.js'
])
.pipe(concat('app.js'))
.pipe(gulp.dest('./assets/js'));
});
gulp.task('minifyScripts', ['concatScripts'], function() {
return gulp.src('assets/js/app.js')
.pipe(uglify())
.pipe(rename('app.min.js'))
.pipe(gulp.dest('public/app/js'));
});
gulp.task('build', ['sass', 'minifyScripts']);
gulp.task('watch', function() {
gulp.watch('./assets/scss/**/*.scss', ['sass']);
gulp.watch('./assets/js/**/*.js', ['minifyScripts']);
});
gulp.task('default', ['build']);