Gulp - Combinando Tarefas
A tarefa permite uma abordagem modular para configurar o Gulp. Precisamos criar tarefas para cada dependência, que adicionaríamos à medida que localizamos e instalamos outros plug-ins. A tarefa Gulp terá a seguinte estrutura -
gulp.task('task-name', function() {
//do stuff here
});
Onde “task-name” é um nome de string e “function ()” executa sua tarefa. O “gulp.task” registra a função como uma tarefa dentro do nome e especifica as dependências de outras tarefas.
Instalando Plugins
Vamos pegar um plugin chamado minify-csspara mesclar e reduzir todos os scripts CSS. Ele pode ser instalado usando o npm conforme mostrado no seguinte comando -
npm install gulp-minify-css --save-dev
Para trabalhar com o “plugin gulp-minify-css”, você precisa instalar outro plugin chamado “gulp-autoprefixer” conforme mostrado no seguinte comando -
npm install gulp-autoprefixer --save-dev
Para concatenar os arquivos CSS, instale o gulp-concat conforme mostrado no comando a seguir -
npm install gulp-concat --save-dev
Após a instalação dos plug-ins, você precisa escrever dependências em seu arquivo de configuração da seguinte maneira -
var autoprefix = require('gulp-autoprefixer');
var minifyCSS = require('gulp-minify-css');
var concat = require('gulp-concat');
Adicionando Tarefa ao arquivo Gulp
Precisamos criar tarefas para cada dependência, que adicionaríamos ao instalar os plug-ins. A tarefa Gulp terá a seguinte estrutura -
gulp.task('styles', function() {
gulp.src(['src/styles/*.css'])
.pipe(concat('styles.css'))
.pipe(autoprefix('last 2 versions'))
.pipe(minifyCSS())
.pipe(gulp.dest('build/styles/'));
});
O plugin 'concat' concatena os arquivos CSS e o plugin 'autoprefix' indica a versão atual e a anterior de todos os navegadores. Ele minimiza todos os scripts CSS da pasta src e copia para a pasta build chamando o método 'dest' com um argumento, que representa o diretório de destino.
Para executar a tarefa, use o seguinte comando no diretório do seu projeto -
gulp styles
Da mesma forma, usaremos outro plugin chamado 'gulp-imagemin' para compactar o arquivo de imagem, que pode ser instalado usando o seguinte comando -
npm install gulp-imagemin --save-dev
Você pode adicionar dependências ao seu arquivo de configuração usando o seguinte comando -
var imagemin = require('gulp-imagemin');
Você pode criar a tarefa para a dependência definida acima, conforme mostrado no código a seguir.
gulp.task('imagemin', function() {
var img_src = 'src/images/**/*', img_dest = 'build/images';
gulp.src(img_src)
.pipe(changed(img_dest))
.pipe(imagemin())
.pipe(gulp.dest(img_dest));
});
As imagens estão localizadas em “src / images / ** / *” que são salvas no img_srcobject. É canalizado para outras funções criadas pelo construtor 'imagemin'. Ele compacta as imagens da pasta src e as copia para a pasta build chamando o método 'dest' com um argumento, que representa o diretório de destino.
Para executar a tarefa, use o seguinte comando no diretório do seu projeto -
gulp imagemin
Combinando Múltiplas Tarefas
Você pode executar várias tarefas ao mesmo tempo, criando uma tarefa padrão no arquivo de configuração, conforme mostrado no código a seguir -
gulp.task('default', ['imagemin', 'styles'], function() {
});
O arquivo Gulp está configurado e pronto para ser executado. Execute o seguinte comando no diretório do seu projeto para executar as tarefas combinadas acima -
gulp
Ao executar a tarefa usando o comando acima, você obterá o seguinte resultado no prompt de comando -
C:\work>gulp
[16:08:51] Using gulpfile C:\work\gulpfile.js
[16:08:51] Starting 'imagemin'...
[16:08:51] Finished 'imagemin' after 20 ms
[16:08:51] Starting 'styles'...
[16:08:51] Finished 'styles' after 13 ms
[16:08:51] Starting 'default'...
[16:08:51] Finished 'default' after 6.13 ms
[16:08:51] gulp-imagemin: Minified 0 images