Executando uma tarefa com o Gulp
Executando a tarefa.
Para executar a tarefa, primeiro certifique-se de que seu diretório de trabalho esteja onde está seu gulpfile. O comando a seguir não funcionará de outra forma.
Nossa tarefa Gulp, como você deve se lembrar, é chamada stylesde . Para executar a stylestarefa, emita este comando:
gulp styles
Nossa stylestarefa será executada e deverá compilar nossos arquivos .scss em um arquivo chamado style.css que será colocado dentro do diretório de estilos .
Parabéns!
Um pequeno problema, porém, é um pouco árduo alternar entre o código e a linha de comando para compilar Sass toda vez que atualizamos nosso código.
Observando alterações em seus arquivos de origem
O Gulp tem um método embutido chamado .watch(), que nos permite dizer ao Gulp para procurar quaisquer alterações em nossos arquivos de origem. Desta forma, sempre que atualizarmos qualquer um de nossos arquivos .scss, nossa stylestarefa irá automaticamente executar e recompilar o arquivo styles.css .
Vamos criar outra tarefa Gulp para observar nossos arquivos de origem. Vamos nomear essa tarefa do Gulp como watch.
Assim como nossa stylestarefa, criaremos a watchtarefa usando o wrapper de tarefas.
gulp.task(‘watch’, function() {
// The guts goes here
});
Isto é o que a watchtarefa fará:
- Use o método do Gulp .watch()para monitorar quaisquer alterações em qualquer um dos nossos arquivos .scss.
- Sempre que o Gulp detectar uma mudança, nossa stylestarefa será executada.
gulp.task(‘watch’, function() {
gulp.watch(‘styles/*.scss’, [‘styles’]);
});
Agora, ao invés de rodar gulp stylessempre que quisermos compilar nosso Sass, podemos rodar gulp watchapenas uma vez quando estivermos trabalhando em um projeto. Gulp observará nossos arquivos Sass para qualquer alteração. Ao ver que atualizamos um arquivo Sass, ele executará automaticamente nossa stylestarefa. Isso acontecerá sempre que salvarmos um arquivo .scss.
Criando novas tarefas
Gulp tem uma comunidade enorme.
Tem mais de 1.400 plugins agora. Podemos melhorar nosso processo de construção com esses plugins.
Vamos criar outra tarefa Gulp. Esta nova tarefa analisará nossos arquivos JavaScript para encontrar problemas comuns.
Para esta tarefa do Gulp, usaremos JSHint .
JSHint é uma ferramenta de análise de qualidade de código JavaScript. O JSHint examinará nossos arquivos JavaScript com um pente fino e, se detectar algo problemático, imprimirá o problema em nossa linha de comando.
Para usar o JSHint, podemos instalar e exigir um plugin Gulp chamado gulp-jshint .
Primeiro, vamos instalar o plugin gulp-jshint em nosso projeto.
npm install gulp-jshint –save-dev
Em seguida, vamos alterar nossa declaração de dependências em nosso gulpfile:
var gulp = require(‘gulp’),
sass = require(‘gulp-sass’),
concat = require(‘gulp-concat’),
jshint = require(‘gulp-jshint’);
Então agora temos sass(), concat()e jshint()neste ponto.
Vamos configurar uma tarefa chamada jshint. Esta tarefa Gulp executará gulp-jshint em arquivos .js que estão dentro do diretório js .
gulp.task(‘jshint’, function() {
return gulp.src(‘js/*.js’)
.pipe(jshint())
});
Nossa tarefa não precisa gerar nenhum arquivo.
Em vez disso, se o JSHint detectar algum erro, seremos notificados por meio de nossa linha de comando para criação de um site profissional ou outra aplicação..
Para executar a tarefa, podemos emitir o seguinte comando:
gulp jshint
Também podemos adicionar a jshinttarefa à nossa watchtarefa para que não precisemos chamá-la manualmente sempre que fizermos alterações em nossos arquivos JavaScript.
gulp.task(‘watch’, function() {
gulp.watch(‘styles/*.scss’, [‘styles’]);
gulp.watch(‘js/*.js’, [‘jshint’]);
});
