Introdução aos pacotes Gulp Starter

Falar sobre o CodeKit e os benefícios que ele oferece para desenvolvedores front-end também veio logo após um post e os benefícios que algo como o Gulp oferece também.

Um post sobre a diferença entre os dois, por que você pode querer um sobre o outro, e as vantagens ou desvantagens de cada um pode ser o seu post.

Mas para isso, gostaria de pegar os pacotes iniciais sobre os quais escrevi sobre o Gulp e dar um exemplo simples de um arquivo Gulp inicial e como usá-lo em seus projetos WordPress.

Introdução ao Gulp

Primeiro, sou fã do Homebrew, então quando se trata de gerenciar pacotes que não fazem parte da Mac App Store, eu o uso. Isso torna muito mais fácil instalar pacotes, atualizá-los e desinstalá-los.

Se você não leu meu guia sobre Homebrew, faça-o, pois o restante deste post pressupõe que você o tenha instalado.

1 Instale o Gulp

Se você tiver o Homebrew instalado, certifique-se de que tudo está bem e atualizado, eu tenho um guia completo para configurar o Gulp em sua máquina local.

Então, se você ainda não tem essa configuração, confira este post para saber como fazê-lo.

2 Escreva seu arquivo de configuração do Gulp, Parte 1

Para inicializar um arquivo de configuração do Gulp, digite o seguinte comando no diretório raiz do seu projeto em seu terminal:

Fácil, não é?

Isso criará um gulpfile.js em branco no diretório raiz do seu projeto. Em seguida, é hora de editar o arquivo.

Para este post, vou usar quatro pacotes que descrevi anteriormente:

• gole
• gulp-sass
• gulp-imagemin
• engolir-feia

Cada uma dessas tarefas é responsável por transpilar Sass, otimizar imagens e minificar JavaScript.

As tarefas que você deseja executar na linha de comando não devem ter espaços.

Para configurar as tarefas básicas para que você possa executá-las na linha de comando, você precisará fazer o seguinte:

Sass

gulp.task('sass', function(){
  return gulp.src('assets/styles/scss/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('assets/styles/css'))
});

JavaScript

gulp.task('js', function() {
  return gulp.src('assets/scripts/dev/*.js')
    .pipe(uglify())
    .pipe(gulp.dest('assets/scripts'));
});

Imagens

gulp.task('images', function() {
  return gulp.src('assets/images/*')
    .pipe(imagemin())
    .pipe(gulp.dest('assets/images'))
});

Executando-os individualmente

Executar essas tarefas individualmente requer que você digite o seguinte no console toda vez que quiser, digamos, transpilar seus arquivos Sass e reduzir seus arquivos JavaScript:

Mas isso envelhece rápido. Além disso, é menos eficiente, especialmente quando você pode configurar um relógio para executar automaticamente suas tarefas sempre que salvar um arquivo.

2 Escreva seu arquivo de configuração do Gulp, Parte 2

Configurar um relógio é provavelmente a melhor coisa que você pode fazer quando se trata de economizar tempo com o Gulp.

Observe os arquivos e faça algo quando um arquivo for alterado. Isso sempre retorna um EventEmitter que emite change eventos.

Configurar um relógio é fácil. É muito parecido com uma tarefa (na verdade, requer uma tarefa), mas também possui argumentos especiais. Para adicionar uma tarefa de observação que lidará com Sass, JavaScript e imagens, configure o seguinte em seu gulpfile.js:

gulp.task('watch', function() {
    gulp.watch('assets/styles/scss/*.scss', gulp.series('sass'));
    gulp.watch('assets/scripts/dev/*.js', gulp.series('js'));
    gulp.watch('assets/images/*', gulp.series('images'));
});

Depois é só executar a tarefa :

A partir daqui, toda vez que você salvar um arquivo Sass, um arquivo JavaScript ou fizer uma alteração em uma imagem, a tarefa será acionada automaticamente fazendo o trabalho da tarefa definida. Observe que isso será executado perpetuamente em seu encadeamento, portanto, você precisará abrir uma nova guia ou janela do terminal se precisar fazer algum trabalho adicional.

Uma Nota Sobre Versões

Em versões anteriores do Gulp, o segundo argumento para a função watch aceitaria uma matriz; no entanto, a versão mais recente requer uma função real (que você pode ver acima em que declarei series ).

O resumo disso é que o Gulp 4 permite a execução sequencial, que é feita via series, e a execução paralela (que pode usar a função paralela ). Esses estão além do escopo deste post, pois isso é puramente para ajudar você a começar.

Uma vez feito, você deve ter muito mais automação em seu processo de construção.