Construir ferramentas permitem que os desenvolvedores se concentrem em um desenvolvimento eficiente, em vez de detalhes gentis que levam a metade da sua vida, mas não agregam muito ao projeto por conta própria. Uma dessas ferramentas de compilação é o Gulp .
O Gulp otimiza as imagens do seu tema, concatena seus arquivos JS e processa seu código SASS / MENOS automaticamente.
Neste artigo, vou mostrar-lhe como começar e como você pode usar o Gulp para acelerar seu processo de desenvolvimento.
O que é Gulp?
Gulp é uma ferramenta de compilação baseada em JavaScript que usa Node para automatizar tarefas mundanas. A idéia básica é criar disparadores que executem uma ação específica.
Por exemplo, sempre que você salvar um arquivo Sass, ele é compilado em um arquivo CSS que você especifica. Ou qualquer vez que você salve um arquivo JS, todos os seus arquivos JavaScript são concatenados em um único arquivo e esse arquivo é minificado.
Parece bom, como faço para começar?
Você precisará do Nó para executar o Gulp. Isso deve ser fácil, basta visitar nodejs.org e baixar e executar o instalador. O nó será instalado, juntamente com npm (gerenciador de pacotes de nó), que você usará para capturar pacotes de nós, como o Gulp.
O próximo passo é instalar o Gulp globalmente. Você pode fazer isso abrindo o terminal ou prompt de comando no Windows (vou ligar para ambos os terminais a partir de agora) e emitir o seguinte comando:
| Instalação npm – glo-cli globular |
Isso instala a interface da linha de comando Gulp para que você possa emitir comandos Gulp em qualquer lugar. Você também precisa instalar o Gulp para seu projeto específico. Isso ocorre porque cada projeto terá requisitos diferentes. Você não estará minifigando os mesmos arquivos, você não usará a mesma estrutura, você pode nem usar WordPress ou PHP para todos os seus projetos!
Mas antes de fazer isso, vamos conversar o WordPress por um momento.
Usando ferramentas de compilação com o WordPress
A maioria dos nossos esforços irá fazer uma das duas coisas: modificar arquivos existentes ou criar novos arquivos com base nos existentes. Muitos dos arquivos que usamos para o desenvolvimento não serão usados no produto final. Se construímos um tema usando o Sass para a folha de estilo, o arquivo CSS final é o que será enviado como parte do tema, porque os arquivos Sass originais não são necessários.
Existem duas abordagens que você pode tomar:
- Arquivos de desenvolvimento de suprimentos dentro do seu projeto
- Omitir todos os arquivos relacionados ao desenvolvimento
Supplying Development Files
A vantagem disso é que você fará os desenvolvedores felizes e eles poderão ampliar o seu trabalho com mais exatidão e com maior grau de liberdade. A desvantagem é que a presença desses arquivos pode confundir alguns e talvez você precise oferecer suporte para eles exatamente o mesmo. Para projetos de código aberto, eu consideraria o fornecimento de todos os arquivos de desenvolvimento, caso em que eles podem residir no projeto principal.
Omitindo arquivos de desenvolvimento
O lado positivo de omitir esses arquivos é que eles removem a confusão e fazem downloads menores. Os arquivos de desenvolvimento para codificação geralmente não incluem uma enorme sobrecarga, mas se você trabalha com muitas imagens ou arquivos de texto grandes isso pode ser um problema. A desvantagem é que só você poderá trabalhar com os arquivos originais. Em alguns projetos, isso seria considerado um lado positivo, então o que funciona para você é o que você deve escolher. Aqui, os arquivos residem fora da pasta entregue final.
Instalando o Gulp para o nosso projeto
Nosso projeto de teste será um tema simples e estaremos fornecendo nossos arquivos de desenvolvimento para que possamos usar a estrutura à esquerda da imagem acima. Instale o Gulp no diretório do tema principal do seu site, navegando para o diretório no terminal e emitindo o seguinte comando:
| npm install –save-dev gulp |
O próximo passo é criar um Gulpfile. Este é um arquivo JavaScript que informa o Gulp o que fazer e quando fazê-lo. Crie Gulpfile.jsna sua pasta do tema principal e cole o seguinte conteúdo para ele:
| Var gulp = require ( ‘ gulp ‘ ); | |
| Engolir . Tarefa ( ‘ default ‘ , function () { | |
| }); |
A linha inicial afirma que estamos exigindo o próprio Gulp. A próxima seção define uma tarefa do Gulp. Isso pode ser qualquer coisa, desde minificação até otimização de imagem, por agora deixei esse espaço em branco.
Depois de salvar esse arquivo voltar para o terminal e emitir um único comando: gulp. Se nada mais for especificado, a tarefa padrão definida no Gulpfile será executada. Nós definimos essa tarefa, mas não tem conteúdo, então ele apenas começa e termina, você deve ver algo assim no seu terminal:
Criando Tarefas
A maioria das tarefas começará com arquivos de origem (ou um único arquivo), manipulá-los e produzir o resultado em um arquivo diferente. Sass / LESS pode ser o exemplo mais óbvio, então vamos começar processando um arquivo Sass. Para executar uma ação, você precisará encontrar o módulo Gulp correto. Isso é bastante fácil, escreva “gulp sass” no Google e você encontrará o que precisa, um pacote chamado
Para realizar uma ação, você precisará encontrar o módulo Gulp certo. Isso é bastante fácil, escreva “gulp sass” no Google e você encontrará o que precisa, um pacote chamado gulp-sass .
Each package’s npm page has instructions on installation and usage. Apart from the specific commands for each module the steps are almost always the same:
- Instale o pacote
- Inclua o pacote
- Use-o no Gulpfile
Você pode instalar o gulp-sass emitindo o seguinte comando no terminal:
| Npm instala gulp-sass –save-dev |
Em seguida, crie uma variável na parte superior do Gulpfile que usaremos mais tarde:
| Var sass = require ( ‘ gulp-sass ‘ ); |
Agora estamos prontos para criar uma tarefa! Deixe-me mostrar-lhe o código completo e adicione a explicação abaixo:
| Engolir . Tarefa ( ‘ sass ‘ , function () { | |
| Devolver o gole . src ( ‘ ./development/styles/style.scss ‘ ) | |
| . Pipe ( sass (). On ( ‘ error ‘ , sass . LogError )) | |
| . Pipe ( gulp . Dest ( ‘ ./ ‘ )); | |
| }); |
Comecei definindo uma tarefa chamada “sass”. Essa tarefa leva um arquivo de origem (o arquivo style.sass dentro do desenvolvimento / estilos), o processa e o escreve no arquivo style.css na pasta principal. A maior parte disso é realizada usando a pipe()função. Piping é a espinha dorsal do Gulp, transporta dados entre as diferentes funções.
Neste fluxo, começamos com o conteúdo de um arquivo de origem. O conteúdo é canalizado para a sass()função. Isso cuida todo o processamento do sass e cuspiu algo (o CSS final). Este conteúdo é adicionado à dest()função que define onde o arquivo está gravado. Ele assumirá o nome do arquivo original, então acabaremos com style.csso nosso produto final. Para executar esta tarefa é executada gulp sassno terminal.
Minificando arquivos
Anther tarefa comum é a minificação dos arquivos. Uma vez que criamos o nosso style.css, poderíamos torná-lo muito mais pequeno, tornando nosso tema mais eficiente.
Vamos seguir o mesmo processo que antes, começando com Googling “gulp minify css”. Você deve encontrar gulp-minify-css . Instale-o usando npm install --save-dev gulp-minify-csse inclua-o na parte superior do seu Gulpfile usandovar minifyCss = require('gulp-minify-css');
Uma vez que tudo esteja configurado, podemos adicioná-lo à nossa sasstarefa. Nós simplesmente precisamos canalizar nosso conteúdo para a função de minificação depois que o módulo sass fez sua coisa, aqui está a tarefa completa:
| Engolir . Tarefa ( ‘ sass ‘ , function () { | |
| Devolver o gole . src ( ‘ ./development/styles/style.scss ‘ ) | |
| . Pipe ( sass (). On ( ‘ error ‘ , sass . LogError )) | |
| . Pipe ( minifyCss ({ | |
| Mantenha comentários especiais : 1 | |
| })) | |
| . Pipe ( gulp . Dest ( ‘ ./ ‘ )); | |
| }); |
Um truque que eu amo usar é adicionar as keepSpecialCommentsopções. Por padrão, todos os comentários serão eliminados, mas o nosso tema não é um tema real, a menos que tenha o comentário do cabeçalho no style.cssarquivo. Esses casos são exatamente por que a opção de comentários especiais existe. Anexe um ponto de exclamação após o início do seu comentário ( /*) para fazer um comentário especial, aqui está um cabeçalho de tema completo para você:
| / *! | |
| Nome do Tema: Meu Tema | |
| URI do tema: https://danielpataki.com | |
| Autor: Daniel Pataki | |
| Autor URI: https://danielpataki.com/ | |
| Descrição: Um tema com um comentário especial. | |
| Versão: 1.0 | |
| Domínio do texto: mytheme | |
| * / |
Concatenar arquivos
Vamos voltar a atenção para concatenação que nos permite mesclar vários arquivos em um. Esta técnica geralmente é usada para arquivos do Javascript. Eu gosto de usar gulp-include porque me dá mais controle. Até agora você deve ser capaz de instalá-lo e incluí-lo, vamos direto ao uso.
Em vez de concatenar um monte de arquivos, fornecendo um destino de origem e um local de saída, usarei um arquivo JS central como intermediário. Dentro deste arquivo, eu poderei definir quais arquivos eu quero concatenar e também adicionar código JS regular. Na pasta de desenvolvimento / scripts eu criaria um scripts.jsarquivo, que seria algo assim:
| // = include ../components/bower/fastclick/lib/fastclick.js | |
| // = include ../components/bower/foundation/js/vendor/modernizr.js | |
| // = include ../components/bower/foundation/js/foundation/foundation.js | |
| // = include ../components/bower/foundation/js/foundation/foundation.reveal.js | |
| // = include ../components/bower/foundation/js/foundation/foundation.dropdown.js | |
| //= include ../components/bower/foundation/js/foundation/foundation.alert.js | |
| //= include stickybar.js | |
| jQuery ( documento ). Fundação (); |
Gulp-include me permite usar as instruções de inclusão que você vê no início do arquivo para puxar o código encontrado nesses arquivos. Os primeiros 6 são da Fundação , eles criaram as necessidades de Javascript da estrutura da Fundação. O final incluir é um código para barras de menu pegajosas. Finalmente, adicionei um código Javascript regular que inicializará a Fundação. Vamos criar uma tarefa do Gulp que faria tudo isso funcionar:
| gulp.task(“scripts“, function() { | |
| Engolir . src ([ ‘ ./development/scripts/scripts.js ‘ ]) | |
| . Pipe ( incluir ()) | |
| . Tubo ( gulp .dest(“./“) ) | |
| }); | |
I’ve targeted the development/scripts/scripts.js file and piped it to the include function which will take care of the includes. The destination folder is the root folder, a scripts.js file will be created there. You can run this task by typing gulp scripts into the terminal.
Executando tarefas múltiplas
Até agora tão bom, mas agora só tem automação parcial e temos que executar tudo separadamente. Vamos resolver a segunda questão preenchendo nossa tarefa padrão. Nossa tarefa padrão executará nossas tarefas de estilos e estilos já existentes. Este é um assunto simples. Veja como será nossa tarefa padrão final:
| Engolir . Tarefa ( ‘ padrão ‘ , [ ‘ scripts ‘ , ‘ estilos ‘ ]); |
É isso mesmo, continue adicionando tarefas conforme necessário. Execute a tarefa padrão usando o gulp command.
Watching Files
Para o nosso último truque, faremos correr tudo isso automaticamente à medida que fazemos alterações. O objetivo é fazer com que o Gulp assista nossos scripts e estilos e execute as tarefas necessárias quando eles mudam. Instale e inclua gulp-watch por conta própria e crie uma nova tarefa com o seguinte código:
| Engolir . Tarefa ( ‘ assistir ‘ , função () { | |
| Engolir . Assistir ( ‘./development/styles/*.scss‘, [‘sass‘] ); | |
| Engolir . Assista ( ‘ ./development/scripts/*.js ‘ , [ ‘ scripts ‘ ]); | |
| }); |
Esta tarefa contém uma função que define dois conjuntos de arquivos assistidos. O primeiro conjunto verá todos os arquivos com a .scssextensão dentro da pasta de desenvolvimento / estilos. Quando qualquer um deles mudar, a stylestarefa será executada. O segundo conjunto verá todos os arquivos com a .jsextensão dentro da pasta de desenvolvimento / scripts. Quando qualquer um deles mudar, a scriptstarefa será executada.
Se você executar a gulp watchpartir do terminal, você deve ver que a tarefa começa e termina, mas não sai e permite que você digite outro comando. Isso ocorre porque os arquivos estão sendo assistidos. Se você salvar um arquivo, verá a tarefa começar e terminar novamente. Isso continuará acontecendo até você fechar a janela do terminal ou pressionar o controle + c para sair.
Economizando tempo com ferramentas de compilação
Construir ferramentas como o Gulp são imensamente poderosas e mal acabamos de arranhar a superfície aqui. Seja qual for a tarefa cansativa e chata que você possa inventar, você pode automatizá-la com o Gulp.
A página Gulp Plugins está cheia de pacotes para idéias e você também encontrará um bocado no Github. Uso-o para otimização de imagens, fontes, prefixo, criando servidores locais, atualizando o navegador automaticamente e mais!
Você usa o Gulp ou uma ferramenta de construção diferente? Como isso alterou seu fluxo de trabalho? Quais são os maiores benefícios que você vê? Deixe-nos saber nos comentários abaixo.
