Cansado de pressionar F5 toda vez que muda um arquivo?

Uma das coisas mais úteis que você pode fazer com o executor de tarefas Grunt é fazer com que ele inicie as tarefas sempre que você alterar um arquivo. Os usos óbvios para isso seriam compilar arquivos LESS, SASS de Coffeescript ou executar testes de unidade.

Outra seria fazer o navegador recarregar os arquivos alterados para que, depois de fazer seu CSS / Js / qualquer edição, você volte ao navegador e as alterações estejam lá – não há necessidade de pressionar F5.

Felizmente, existe um plugin para isso: contrib-livereload

A documentação afirma claramente para usar o plug-in regarde , em vez de contrib-watch para informar o plug-in livereload das mudanças nos arquivos.

Observe que grunt-contrib-livereload é projetado para usar grunt-regarde em vez de grunt-contrib-watch (principalmente devido a falhas na tarefa de observação que não dá acesso aos arquivos alterados porque gera tarefas em subprocessos).

Até aí tudo bem, mas a documentação regarde diz:

[obsoleto em favor de grunt-contrib-watch, clique no link abaixo] Observe os arquivos para alterações e execute tarefas – Leia mais
https://github.com/gruntjs/grunt-contrib-watch

Rosto triste.

A boa notícia é que a documentação do contrib-livereload está desatualizada e agora funcionará bem com o contrib-watch.

Requer configuração ligeiramente diferente …

Primeiro, você precisará de algum bumf para inserir em seu middleware, coloque-o no topo de seu Gruntfile :

'use strict';
var path = require('path');

var lrSnippet = require('grunt-contrib-livereload/lib/utils').livereloadSnippet;

var folderMount = function folderMount(connect, point) {
    return connect.static(path.resolve(point));
};

Em seguida, você desejará injetar o livereloader em seu middleware. Estou usando o Connect e faço o seguinte:

connect: {
    run: {
        options: {
            port: 9000,
            hostname: 'localhost',
            base: 'build/',
            middleware: function(connect, options) {
                return [lrSnippet, folderMount(connect, options.base)]
            }
        }
    }
},

Em seguida, é hora de dizer o que fazer:

watch: {
    sass: {
        files: ['source/**/*'],
        tasks: ['sass:dist', 'copy:build'],
        options:{
            livereload: true                    
        }
    }
},

E, finalmente, a configuração do próprio recarregamento ao vivo:

livereload: {
       port: 35729 
   },