Edit: Vérification de versioning info. grunt-contrib-watch a maintenant livereload soutien cuit.
Ce qu'est une rude bataille. J'ai couru dans des problèmes avec celui-ci, alors laissez-moi faire ce que je peux expliquer (ou au moins à le faire fonctionner). Gardez à l'esprit, c'est la façon dont je l'ai mis en place et il semble que cela fonctionne la plupart du temps.
Pour commencer, vous aurez envie de vous assurer que vous avez udpated votre package.json avec le bouton droit de dépendances. Je ne suis pas sûr que livereload fonctionne avec le cuit dans la "montre" de la tâche et j'ai été en utilisant grunt-regarde de la fin. Mon colis.json ressemble généralement à ceci:
"dependencies": {
"grunt": "~0.4.x",
"grunt-contrib-livereload": "0.1.2",
"grunt-contrib-connect": "0.2.0",
"grunt-regarde": "0.1.1"
},
Évi vous voulez grunt (duhhh), livereload, connectez semble aider avec le montage des dossiers, et regarde, c'est comme grunt-montre, il semble juste de travailler mieux (j'ai oublié pourquoi exactement).
Vous pourriez faire votre package.json encore mieux en spécifiant livereload dans son propre "devDependencies" objet si vous êtes si incliné. Maintenant, lancez votre bon vieux fasioned npm install pour obtenir les bonnes choses dans votre projet.
Parlons gruntfiles:
Comme vous le savez probablement, la gruntfile est ce qui fait la magie se produire. Quelque part vers le bas de votre gruntfile, vous aurez envie de le spécifier
grunt.loadNpmTasks('grunt-regarde');
grunt.loadNpmTasks('grunt-contrib-livereload');
grunt.loadNpmTasks('grunt-contrib-connect');
En haut de votre gruntfile, nous vous le souhaitez, ajouter un utils pour livereload. En vertu de l' /*global module:false*/, aller de l'avant et ajouter var lrSnippet = require('grunt-contrib-livereload/lib/utils').livereloadSnippet;.
Après cela, vous n'avez pas vraiment besoin d'apprendre à se connecter, tu dois l'utiliser. Vérifier mon style:
var folderMount = function folderMount(connect, point) {
return connect.static(path.resolve(point));
};
Cela vient avant module.exports = function(grunt) {
Maintenant, nous allons entrer dans le vif de la gruntfile. Encore une fois, j'oublie de quoi se connecter est en train de faire, mais c'est là que le middleware de la magie entre en jeu. Dans vos modules.les exportations, ajouter:
connect: {
livereload: {
options: {
port: 9999,
middleware: function(connect, options) {
return [lrSnippet, folderMount(connect, '.')]
}
}
}
},
Maintenant, nous voulons avoir les fichiers regardé. J'aime un peu différentes tâches, car je ne veux pas tout mon grognement processus en cours d'exécution à chaque fois que j'enregistre un fichier CSS. Voici ce que j'ai (encore une fois, ajoutez - module.exports):
regarde: {
txt: {
files: ['styles/*.css', 'index.html'],
tasks: ['livereload']
},
styles: {
files: ['sass/*.scss', 'sass/*/*.scss'],
tasks: ['compass']
},
templates: {
files: ['templates/*.jade'],
tasks: ['jade']
}
},
Vous pouvez voir que j'ai seulement envie livereload à feu quand il y a eu des modifications à mon compilé css (*.css) ou à mon html compilé. Si je modifier un fichier SCSS, je tiens à feu hors tout de la boussole. Si j'ai modifier un modèle jade, je veux seulement le feu de jade à compilateur HTML. Je pense que vous pouvez voir ce qu'il se passe. Vous pouvez jouer avec cela, il suffit d'être intelligent à ce sujet parce que vous pourriez être pris dans une boucle infinie.
Enfin, vous avez besoin pour déclencher ces processus. J'aime reliant tous à ma principale tâche grunt parce que mon gruntfile est juste que sucré.
// Default task.
grunt.registerTask('default', ['livereload-start', 'connect', 'regarde']);
Maintenant, lorsque vous lancez grunt dans la CLI, vous devrait (je l'espère, peut-être, croisez les doigts) obtenir quelque chose comme ceci:
Running "connect:livereload" (connect) task
Starting connect web server on localhost:9999.
Parcourez http://localhost:9999/yourpage.html et regarder la magie se produire.
plein gruntfile ici. package complet.json ici.
