Como usar o grunhido para automatizar seu fluxo de trabalho [Tutoriais]

Eu sou um grande defensor da automação porque torna a vida muito mais simples. Por que gastar tempo em tarefas monótonas que sugam sua força vital quando você tem um computador para fazer as coisas por você? Isto é especialmente verdade para o desenvolvimento web.

Muitas tarefas de desenvolvimento podem ser uma tarefa. Durante o desenvolvimento, talvez você queira compilar o código. Ao usar uma versão de desenvolvimento, você pode concatenar e diminuir arquivos, remover apenas recursos de desenvolvimento e assim por diante. Mesmo relativamente descomplicadas, como excluir vários arquivos ou renomear pastas pode ocupar uma grande parte do nosso tempo.

Neste artigo, mostrarei como você pode tornar sua vida mais fácil aproveitando a excelente funcionalidade oferecida pelo Grunt, um executor de tarefas Javascript. Vou guiá-lo por todo o processo, então não se preocupe, mesmo que você não seja um assistente de Javascript!

Mais sobre Hongkiat.com:

• CSSMatic faz CSS fácil para Web Designers
• Automatizando tarefas no Mac com ações de pastas
• Automatize seus arquivos do Dropbox com ações
• 10 aplicativos para ajudar a automatizar tarefas no seu dispositivo Android
• Como (automaticamente) fazer backup do seu site no Dropbox

Instalando o Grunt

Instalar o Grunt é muito fácil porque ele usa o gerenciador de pacotes do nó. Isso significa que você também pode ter que instalar o próprio Node. Abra um terminal ou um prompt de comando (eu chamarei este terminal a partir de agora) e digite nmp -v.

Se você ver um número de versão que você tem npm instalado, se você ver um erro "comando não encontrado", você terá que instalá-lo indo para a página de downloads do nó e selecionando a versão que você precisa.

Depois que o Node é instalado, obter o Grunt é uma questão de um único comando emitido no terminal:

instalação npm -g grunt-cli

Uso Básico

Você estará usando o Grunt em uma base de projeto a projeto, já que cada projeto terá requisitos diferentes. Vamos começar um projeto agora, criando uma pasta e navegando para ela através do nosso terminal.

Dois arquivos compõem o coração do Grunt: package.json e Gruntfile.js. O arquivo de pacote define todas as dependências de terceiros que sua automação usará, o Gruntfile permite controlar como exatamente estes são usados. Vamos criar um arquivo de pacote bare-bones agora com o seguinte conteúdo:

"name": "test-project", "version": "1.0", "devDependencies": "grunt": "~ 0.4.5",

O nome e a versão dependem de você, as dependências devem conter todos os pacotes que você está usando. Nós não estamos fazendo nada no momento, então vamos nos certificar de que o próprio Grunt seja adicionado como uma dependência.

Você pode estar se perguntando o que essa linha sinuosa (~) chamou de til está fazendo lá.

As versões podem ser necessárias usando as regras do versionador semântico para npm. Em poucas palavras:

• Você especifica uma versão exata como 4.5.2
• Você pode usar maior que / menor que para indicar a versão mínima ou máxima, como > 4.0.3
• Usando o til especifica um bloco de versão. Usando ~ 1,2 é considerado ser 1.2.x, qualquer versão acima de 1.2.0 mas abaixo de 1.3

Há muito mais maneiras de especificar versões, mas isso é suficiente para a maioria das necessidades. O próximo passo é criar um Gruntfile que irá executar nossas automações.

 module.exports = function (grunt) grunt.initConfig (pkg: grunt.file.readJSON ('package.json')); grunt.registerTask ('default', []); ; 

Este é basicamente o esqueleto de um Gruntfile; existem dois locais de interesse. Um local está dentro do initConfig () função. É aqui que entra toda a configuração do seu projeto. Isso incluirá coisas como lidar com a compilação LESS / SASS, minifying scripts e assim por diante.

A segunda localização é abaixo dessa função onde você especifica as tarefas. Você pode ver uma tarefa especificada “padrão”. Está vazio no momento, então não faz nada, mas expandiremos isso mais tarde. As tarefas essencialmente enfileiram pedaços da nossa configuração de projeto e os executam.

Por exemplo, uma tarefa chamada “roteiros” pode concatenar todos os nossos scripts, depois minimizar o arquivo resultante e movê-lo para o local final. Essas três ações são definidas na configuração do projeto, mas são “unidos” pela tarefa. Se isso ainda não está claro, não se preocupe, mostrarei como isso é feito.

Nossa primeira tarefa

Vamos criar uma tarefa que limita um único arquivo javascript para nós.

Há quatro coisas que precisamos fazer quando quisermos adicionar uma nova tarefa:

• Instalar um plugin, se necessário
• Exigir no Gruntfile
• Escreva uma tarefa
• Adicione-o a um grupo de tarefas, se necessário

(1) Encontrar e instalar o plugin

A maneira mais fácil de encontrar o plug-in de que você precisa é digitar algo assim no Google: “minify javascript grunt plugin”. O primeiro resultado deve levar você ao plugin grunt-contrib-uglify, que é exatamente o que precisamos.

A página do Github diz tudo o que você precisa saber. A instalação é uma única linha no terminal, aqui está o que você precisa usar:

 npm instalar grunt-contrib-uglify --save-dev 

Pode ser necessário executar isso com privilégios de administrador. Se você conseguir algo como npm ERR! Por favor, tente executar este comando novamente como root / Administrator. Ao longo do caminho basta digitar sudo antes do comando e digite sua senha quando solicitado:

 sudo npm instalar grunt-contrib-uglify --save-dev 

Este comando realmente analisa o seu package.json arquivo e adiciona-lo como uma dependência lá, você não precisará fazer isso manualmente.

(2) Exigir no Gruntfile

O próximo passo é adicionar seu Gruntfile como um requisito. Eu gosto de adicionar plugins no topo do arquivo, aqui está o meu Gruntfile completo depois de adicionar grunt.loadNpmTasks ('grunt-contrib-uglify');.

 module.exports = function (grunhido) grunt.loadNpmTasks ('grunt-contrib-uglify'); grunt.initConfig (pkg: grunt.file.readJSON ('package.json')); grunt.registerTask ('default', []); ; 

(3) Crie uma tarefa para minimizar scripts

Como discutimos, isso deve ser feito dentro do initConfig () função. A página do Github para o plugin (e a maioria dos outros plugins) dá-lhe muitas informações e exemplos. Aqui está o que eu usei no meu projeto de teste.

 uglify: build: src: 'js / scripts.js', dest: 'js / scripts.min.js' 

Isso é bastante simples, eu especifiquei o scripts.js arquivo no diretório js do meu projeto e o destino do arquivo minificado. Existem muitas maneiras de especificar arquivos de origem, vamos dar uma olhada nisso mais tarde.

Por enquanto, vamos dar uma olhada no Gruntfile completo depois que ele for adicionado, para ter certeza de que você sabe como as coisas se encaixam.

 module.exports = function (grunhido) grunt.loadNpmTasks ('grunt-contrib-uglify'); grunt.initConfig (pkg: grunt.file.readJSON ('package.json'), uglify: build: src: 'scripts.js', dest: 'scripts.min.js'); grunt.registerTask ('default', []); ; 

(4) Adicione esta configuração a um grupo de tarefas

Agora você pode ir para o seu terminal e digitar grunhido uglify mas vamos precisar de grupos de tarefas para executar várias tarefas mais tarde. Nós temos a tarefa padrão vazia, apenas esperando que algo seja adicionado, então vamos modificá-la para o seguinte:

 grunt.registerTask ('default', ['uglify']); 

Nesta fase você deve poder ir ao terminal, digite grunhido e veja a minificação acontecer. Não esqueça de criar um scripts.js arquivo claro!

Isso não demorou muito tempo para configurar, não é? Mesmo que você seja novato em tudo isso e tenha levado algum tempo para trabalhar nas etapas, o tempo economizado ultrapassará o tempo gasto nele em alguns usos.

Concatenando Arquivos

Vamos olhar para concatenar arquivos e aprenda como especificar vários arquivos como um destino pelo caminho.

Concatenação é o processo de combinar o conteúdo de vários arquivos em um único arquivo. Vamos precisar do plugin grunt-contrib-concat. Vamos trabalhar com os passos:

Para instalar o plugin use npm instalar grunt-contrib-concat --save-dev no terminal. Uma vez feito, certifique-se de adicioná-lo ao seu Gruntfile como antes de usar grunt.loadNpmTasks ('grunt-contrib-concat');.

Em seguida é a configuração. Vamos combinar três arquivos específicos, a sintaxe será familiar.

 concat: dist: src: ['dev / js / header.js', 'dev / js / minhaplugin.js', 'dev / js / footer.js'], dest: 'js / scripts.js', ,, 

O código acima pega os três arquivos dados como fonte e os combina no arquivo dado como destino.

Isso já é muito poderoso, mas e se um novo arquivo for adicionado? Precisamos voltar aqui o tempo todo? Claro que não, podemos especificar uma pasta inteira de arquivos para concatenar.

 concat: dist: src: 'dev / js / * js "], dest:' js / scripts.js ',,, 

Agora, qualquer arquivo javascript dentro da pasta dev / js será mesclado em um arquivo grande: js / scripts.js, muito melhor!

Agora é hora de criar uma tarefa para que possamos concatenar alguns arquivos.

 grunt.registerTask ('mergejs', ['concat']); 

Esta não é mais a tarefa padrão, então precisaremos digitar seu nome no terminal quando emitirmos o grunhido comando.

 grunhir mergejs 

Automatizando nossa automação

Nós já fizemos muito progresso, mas há mais! Por enquanto, quando você deseja concatenar ou minify, você precisa ir até o terminal e digitar o comando apropriado. É hora de darmos uma olhada no ver comando que vai fazer isso por nós. Também aprenderemos como executar várias tarefas ao mesmo tempo, ao longo do caminho.

Para começar, precisamos pegar o grunt-contrib-watch. Tenho certeza que você pode instalá-lo e adicioná-lo ao Gruntfile no yuor agora, então vou começar mostrando a você o que eu uso no meu projeto de teste.

 watch: scripts: arquivos: ['dev / js / *. js'], tarefas: ['concat', 'uglify'],, 

Eu nomeei um conjunto de arquivos para assistir “roteiros”, só assim eu sei o que faz. Dentro deste objeto eu especifiquei arquivos para assistir e tarefas para executar. No exemplo de concatenação anterior reunimos todos os arquivos no diretório dev / js.

No exemplo da minificação, nós minimizamos esse arquivo. Faz sentido assistir a pasta dev / js para mudanças e executar estas tarefas sempre que houver alguma.

Como você pode ver, várias tarefas podem ser chamadas facilmente separando-as com vírgulas. Eles serão executados em seqüência, primeiro a concatenação, depois a minificação neste caso. Isso também pode ser feito com grupos de tarefas, o que é por que eles existem.

Agora podemos modificar nossa tarefa padrão:

 grunt.registerTask ('default', ['concat', 'uglify']); 

Agora nós temos duas escolhas. Sempre que você quiser concatenar e minificar seus scripts, você pode alternar para o terminal e digitar grunhido. Você também pode usar o comando watch para iniciar a visualização de seus arquivos: relógio grunhido.

Ele ficará lá, esperando por você para modificar esses arquivos. Depois disso, ele executará todas as tarefas atribuídas a ele, vá em frente, experimente.

Isso é muito melhor, nenhum input é necessário de nós. Agora você pode trabalhar com seus arquivos e tudo estará bem feito para você.

visão global

Com esse conhecimento rudimentar de como os plugins podem ser instalados e usados ​​e como o comando watch funciona, você está pronto para se tornar um viciado em automação. Há muito mais no Grunt do que discutimos, mas nada que você não pudesse resolver sozinho.

Usando comandos para compilar o SASS, otimizar imagens, autoprefixing e muito mais é apenas uma questão de seguir os passos que discutimos e ler a sintaxe que o plugin requer.

Se você conhece alguns usos particularmente bons para o Grunt, por favor nos avise nos comentários, estamos sempre interessados ​​em ouvir como você usa ferramentas como o Grunt.!