Que tal uma maneira fácil de eliminar milhares de pressionamentos de tecla? Grunt pode fazer isso.
Grunt é uma excelente ferramenta que pode automatizar muitas das coisas que fazemos durante o desenvolvimento web. O resultado é que você ganha mais tempo para se concentrar na construção, evitando minutos repetitivos.
Neste protocolo, vamos nos concentrar em um aspecto do Grunt – observar as alterações nos arquivos e atualizar automaticamente o navegador em resposta. Existem algumas etapas para configurar, mas o resultado final vale a pena.
Se você nunca usou o Grunt, é fácil começar. Primeiro, certifique-se de ter node.js e npm instalados. Você não terá que escrever (muito) código de nó, mas o Grunt precisa dele para ser executado. Existem várias maneiras de instalar, então escolha a mais fácil para sua plataforma.
Depois de resolvido, vamos obter a gruntinterface da linha de comando. Instale-o executando:
sudo npm install -g grunt-cli
Isso torna o gruntcomando disponível em um terminal.
Em seguida, navegue até o diretório do seu projeto da web. Usaremos npmpara definir o package.jsonarquivo de configuração. Execute o seguinte comando e ele o guiará por uma curta sequência de inicialização.
npm init
Boa. Agora você tem um arquivo e está pronto para instalar as duas dependências grunt que usaremos. O primeiro é o módulo e o segundo é o plugin. Instale os dois assim:package.jsongruntgrunt-contrib-watch
npm install grunt --save-dev
npm install grunt-contrib-watch --save-dev
Observe essa bandeira. Isso adicionará entradas à seção de . Olhe nesse arquivo e você verá que ele mantém um registro de quais pacotes npm são necessários para o projeto.--save-devdevDependenciespackage.json
É uma boa ideia comprometer-se com o controle de origem para que novos ambientes de desenvolvimento possam ser configurados rapidamente. Se você estiver trabalhando com uma equipe, eles só precisarão ser executados para obter todas as dependências necessárias automaticamente.package.jsonnpm install
Tudo bem. A seguir, vamos configurar um arquivo chamado que dirá a Grunt o que fazer. Há lotes de excelentes plugins que podem fazer várias coisas como a compilação sass , menos feias javascript , js linting , e mais -, mas por causa do escopo deste Protip vamos nos limitar ao plugin.Gruntfile.jsgrunt-contrib-watch
Nosso básico será mais ou menos assim:Gruntfile.js
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
watch: {
foobar: {
files: ['**/*.js'],
options: {
livereload: true
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['watch']);
};Vamos decompô-lo.
module.exports é o wrapper para módulos de nó (como Grunt!)
grunt.initConfig()diz ao grunt quais plug-ins e tarefas gostaríamos de disponibilizar e como cada um deve ser configurado. Além de alimentar o arquivo, nossa única tarefa é .package.jsonwatch
A foobarchave no watchobjeto pode ser nomeada como você quiser. Você poderia chamá-lo scripts, files, css, etc. Conta a watchplugin que você gostaria que ele procure por quaisquer alterações no filesinterior. Para este exemplo, ele responderá a qualquer arquivo correspondente (o que significa qualquer arquivo em qualquer subdiretório).**/*.js.js
Quando um arquivo é alterado, Grunt notará e executará tudo no array do objeto. Mas espere. Não colocamos nenhuma tarefa . Isso está ok. Neste exemplo, vamos apenas atualizar o navegador, que é um recurso integrado e não requer tarefas adicionais. No entanto, se você quiser adicionar algumas tarefas (como minificação ou compilação sass), elas serão executadas antes da atualização do navegador. Muito prático..jstasksfoobarfoobargrunt-contrib-watch
Agora, o optionsobjeto é o que possibilita livereloadque é onde a mágica acontece. Depois que todas as tarefas forem executadas (se houver), o servidor LiveReload será notificado de que é hora de atualizar. Assim que nosso navegador estiver configurado para lidar com isso, não precisaremos mais pressionar ⌘⇧R!
Por último, a defaulttarefa é o que o grunt executa quando invocado sem nenhum argumento de linha de comando. Aqui, tornamos o padrão watch. Portanto, na linha de comando, basta executar gruntno diretório do projeto (onde está o Gruntfile) e o grunt entrará no modo de observação.
Se você configurar como no exemplo, execute grunte você verá:
Running "watch" task
Waiting...
Estamos tão perto!
A última etapa é ativar o LiveReload em seu navegador. A maneira mais simples é usar uma extensão do navegador . Depois de instalado, ative-o clicando no ícone no canto superior direito. Agora, ele deve ser atualizado quando forem feitas alterações nos arquivos do seu projeto. Quando isso acontecer, você também deverá ver algumas mensagens de console no terminal em que está sendo executado. Experimente!.jsgrunt
Algo ainda mais divertido é habilitar o LiveReload adicionando uma <script>tag ao cabeçalho do seu aplicativo da web. Isso é realmente útil se você tiver vários dispositivos (telefone, tablet, etc.) que gostaria de manter por perto e atualizar automaticamente junto com o navegador da área de trabalho. Obviamente, esses dispositivos já devem ser capazes de se conectar ao seu site de desenvolvimento e também ao IP da máquina local (ou a qualquer máquina em que o grunt esteja em execução).
Se você quiser fazer isso, aponte a tag do script para (o meu se parece com ). Novamente, esse IP deve apontar para a máquina em execução . Dessa forma, você não precisa de um plug – in de navegador e pode recarregar automaticamente em quase qualquer ambiente. (IE excluído, naturalmente)http://your.local.machine.ip:35279/livereload.js?snipver=1 <script type="text/javascript" src="http://192.168.0.2:35729/livereload.js?snipver=1"></script>grunt
Uma última nota para deixá-lo tonto de prazer. As alterações de CSS são especiais ao usar o LiveReload – elas acontecem sem uma atualização. Ou seja, eles são aplicados instantaneamente no seu navegador. Isso parece mágico e torna o desenvolvimento responsivo uma brisa.
Espero que você tenha achado este guia útil. Obrigado a todos que ajudaram a construir Node.js, npm, grunt e LiveReload!
Mais documentação sobre grunt e grunt-contrib watch pode ser encontrada em http://gruntjs.com/ e https://github.com/gruntjs/grunt-contrib-watch