Adicionando processos a tarefas existentes utilizando as valências do Gulp
Podemos facilmente adicionar mais coisas para fazer em nossas tarefas existentes. Vamos fazer isso agora.
Vamos instalar um plugin complementar que nos dará uma saída mais legível.
Execute o seguinte comando para instalar a biblioteca JSHint-stylish em nosso projeto.
npm install jshint-stylish –save-dev
Podemos então modificar nossa jshinttarefa para que ela use jshint-stylish como nosso repórter.
gulp.task(‘jshint’, function() {
return gulp.src(‘js/*.js’)
.pipe(jshint())
.pipe(jshint.reporter(‘jshint-stylish’))
});
Vamos executar a jshinttarefa:
gulp jshint
Se o JSHint descobrir erros e problemas de qualidade de código, ele os exibirá em nossa linha de comando.
$ gulp jshint
[10:29:57] Iniciando ‘jshint’…
\js\main.js
line 2 col 7 Use ‘===’ para comparar com ‘0’. ? 1 aviso
[10:29:57] ‘jshint’ finalizado após 93 ms
Propriedades CSS de prefixo automático
Propriedades CSS com prefixo de fornecedor é muito trabalhoso e saber o que prefixar é um trabalho por si só para criação de um site profissional ou outra aplicação.
Felizmente, existe um pacote chamado Autoprefixer que fará todo o trabalho duro para nós.
Instale o plug-in gulp-autoprefixer em seu projeto com o seguinte comando.
npm install gulp-autoprefixer –save-dev
Anexe nossa declaração de dependências para exigir o plug-in gulp-autoprefixer.
var gulp = require(‘gulp’),
sass = require(‘gulp-sass’),
concat = require(‘gulp-concat’),
jshint = require(‘gulp-jshint’),
autoprefixer = require(‘gulp-autoprefixer’);
Modifique a stylestarefa para canalizar o processo de plug-in gulp-autoprefixer.
gulp.task(‘styles’, function() {
return gulp.src(‘styles/*.scss’)
.pipe(sass({
‘sourcemap=none’: true
}))
.pipe(concat(‘style.css’))
.pipe(autoprefixer())
.pipe(gulp.dest(‘styles/’));
});
Para garantir que você está direcionando os navegadores certos, você pode passar uma lista separada por vírgulas de navegadores para suporte.
gulp.task(‘styles’, function() {
return gulp.src(‘styles/*.scss’)
.pipe(sass({
‘sourcemap=none’: true
}))
.pipe(concat(‘style.css’))
.pipe(autoprefixer(‘last 2 version’, ‘safari 5’, ‘ie 8’, ‘ie 9’, ‘opera 12.1’))
.pipe(gulp.dest(‘styles/’));
});
O acima irá suportar as últimas 2 versões de todos os navegadores, Safari 5, IE 8 e 9 e Opera 12.1.
Uma lista completa de valores que você pode passar pode ser encontrada aqui em Browserslist .
Juntando tudo
Neste ponto, temos três tarefas Gulp que servem a um propósito em nosso processo de construção:
- styles– lida com processos relacionados ao nosso CSS
- jshint– verifica nossos arquivos JavaScript
- watch– executa automaticamente as tarefas stylese sempre que o Gulp detecta alterações em nossos arquivos de origem.watch
No entanto, podemos fazer uma tarefa principal que realiza tudo isso de uma só vez.
No momento, poderíamos executar gulp watche isso iniciaria a watchtarefa, que por sua vez esperaria que fizéssemos uma alteração em nossos arquivos.
No entanto, e se quiséssemos que os arquivos fossem compilados e verificados imediatamente e, em seguida, observássemos uma alteração, tudo simplesmente digitando gulp.
Dentro gulpfile.jsde , adicione uma nova tarefa chamada default, mas em vez de usar uma função para o segundo argumento, use um array.
gulp.task(‘default’, []);
Dentro dessa matriz, podemos passar nossas tarefas na ordem em que queremos que sejam executadas.
gulp.task(‘default’, [‘styles’, ‘jshint’, ‘watch’]);
Agora, quando executamos gulpna linha de comando em nosso diretório de projeto, ele irá:
- Compile nosso Sass para CSS
- Combine todo o nosso CSS em um arquivo chamado styles.css
- Adicione prefixos de fornecedor às propriedades CSS apropriadas
- verifique se há erros em nossos arquivos .js
- Observe nossos arquivos de origem para alterações e execute novamente nossas tarefas automaticamente
Imagine ter que fazer tudo isso manualmente.
Toda vez que você atualiza seu código-fonte. Esse processo de compilação não é apenas tedioso sem um executor de tarefas, mas também é propenso a erros humanos.
Aqui está o conteúdo do nosso gulpfile:
// Dependencies
var gulp = require(‘gulp’),
sass = require(‘gulp-sass’),
concat = require(‘gulp-concat’),
jshint = require(‘gulp-jshint’),
autoprefixer = require(‘gulp-autoprefixer’);
// Task: styles
gulp.task(‘styles’, function() {
return gulp.src(‘styles/*.scss’)
.pipe(sass({
‘sourcemap=none’: true
}))
.pipe(concat(‘style.css’))
.pipe(autoprefixer(‘last 2 version’, ‘safari 5’, ‘ie 8’, ‘ie 9’, ‘opera 12.1’))
.pipe(gulp.dest(‘styles/’))
});
// Task: watch
gulp.task(‘watch’, function() {
gulp.watch(‘styles/*.scss’, [‘styles’]);
});
// Task: jshint
gulp.task(‘jshint’, function() {
return gulp.src(‘js/*.js’)
.pipe(jshint())
.pipe(jshint.reporter(‘jshint-stylish’));
});
// Default task
gulp.task(‘default’, [‘styles’, ‘jshint’, ‘watch’]);