web-dev-qa-db-fra.com

Comment utiliser grunt-contrib-livereload?

J'essaie d'utiliser grunt-contrib-livereload , mais je n'arrive pas à comprendre. Le readme semble ignorer tout ce que je dois expliquer, puis se termine par un exemple qui ne fonctionne pas lorsque je l'essaie et qui ne semble pas directement lié à la documentation. J'ai cherché une meilleure explication dans un article de blog, un tutoriel ou autre, mais je n'ai pas réussi à en trouver une. Quelqu'un peut-il s'il vous plaît expliquer comment démarrer avec cet outil?

Voici le genre de questions que j'ai, basées sur le readme :

La documentation indique que la tâche livereload "doit être transmise à la liste des fichiers qui ont changé" --- mais comment puis-je lui transmettre cette liste de fichiers? L'exemple ne semble pas l'illustrer. Est-ce que regarde passer la liste?

Est-ce que grunt-contrib-connect est requis? Que fait-il et comment puis-je l'utiliser? Dois-je apprendre à connecter avant d'essayer d'utiliser livereload?

Le readme mentionne le middleware qui "doit être le premier inséré" - mais inséré dans quoi, avant quoi d'autre? Et comment est-il inséré?

Et je suppose que je ne comprends pas pourquoi j'ai besoin de manipuler des ports. "Tous les navigateurs écoutant sur le port livereload seront rechargés" --- mais comment puis-je savoir quel navigateur écoute quel port? Dois-je tout connaître des ports avant de pouvoir utiliser livereload? (Toute suggestion sur la meilleure façon d'apprendre à ce sujet?)

Enfin, dans l'exemple, il existe une fonction folderMount qui ne semble pas être liée à une documentation auparavant. Qu'est-ce que c'est et en ai-je besoin?

Je suppose que je demande si quelqu'un peut s'il vous plaît:

  • pointez-moi vers un tutoriel qui est beaucoup plus efficace que le readme actuel;
  • expliquer ces parties inexpliquées du fichier Lisez-moi, si ces réponses sont ce dont j'ai besoin pour comprendre le plugin;
  • ou donnez un exemple fonctionnel en expliquant pourquoi il est fonctionnel.
gruntjslivereload
49
davidtheclark

Le rechargement en direct est maintenant intégré à la version grunt-contrib-watch version 0.4.0. grunt-contrib-livereload et grunt-regarde seront bientôt obsolètes.

Définissez maintenant l’option livereload sur true dans votre configuration. Un serveur de rechargement en direct sera créé, puis rechargé une fois les tâches exécutées:

grunt.initConfig({
  watch: {
    all: {
      options: { livereload: true },
      files: ['lib/*.js'],
      tasks: ['jshint'],
    },
  },
});

Par défaut, le serveur Live Reload sera démarré sur le port 35729. Donc, pour activer le rechargement en direct sur votre page, ajoutez simplement <script src="http://localhost:35729/livereload.js"></script> à votre page.

Plus d'informations sur les documents: https://github.com/gruntjs/grunt-contrib-watch#live-reloading

89
Kyle Robinson Young

Edit: vérifie les informations de version. grunt-contrib-watch a maintenant un support en charge du foie intégré.

Quel doozy. J'ai rencontré des problèmes avec celui-ci aussi, alors laissez-moi faire ce que je peux pour expliquer (ou au moins, vous mettre en marche). Gardez à l’esprit, c’est ainsi que I l’a configuré et que cela semble fonctionner la plupart du temps.

Pour commencer, assurez-vous d'avoir mis à jour votre package.json avec les bonnes dépendances. Je ne suis pas sûr que livereload fonctionne avec la tâche "watch" et j'ai utilisé grunt-regarde depuis quelque temps. Mon package.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"
},

Obvi vous voulez grunt (duhhh), livereload, connect semble aider avec le montage des dossiers, et regarde est comme Grunt-Watch, il semble tout simplement mieux fonctionner (j'oublie pourquoi exactement).

Vous pouvez améliorer encore votre package.json en spécifiant livereload dans son propre objet "devDependencies" si vous le souhaitez. Maintenant, lancez votre bon vieux npm install fasioned pour obtenir les goodies de votre projet.

Parlons gruntfiles:

Comme vous le savez probablement, c'est le gruntfile qui fait que la magie opère. Quelque part vers le bas de votre fichier Grunt, vous voudrez spécifier

grunt.loadNpmTasks('grunt-regarde');
grunt.loadNpmTasks('grunt-contrib-livereload');
grunt.loadNpmTasks('grunt-contrib-connect');

Au sommet de votre fichier grunt, nous voudrons ajouter des utilitaires pour la charge du foie. Sous /*global module:false*/, continuez et ajoutez var lrSnippet = require('grunt-contrib-livereload/lib/utils').livereloadSnippet;.

Après cela, vous n'avez pas vraiment besoin d'apprendre à vous connecter, vous devez simplement l'utiliser. Vérifiez mon style:

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

Cela vient avant module.exports = function(grunt) { 

Entrons maintenant dans la viande du fichier grunt. Encore une fois, j'oublie ce que connect fait, mais c’est là que la magie des middlewares entre en jeu. Dans vos modules.exports, ajoutez:

connect: {
  livereload: {
    options: {
      port: 9999,
      middleware: function(connect, options) {
        return [lrSnippet, folderMount(connect, '.')]
      }
    }
  }
},

Nous voulons maintenant que les fichiers soient visionnés. J'aime configurer quelques tâches différentes car je ne veux pas que tout le processus Grunt soit exécuté à chaque fois que j'enregistre un fichier CSS. Voici ce avec quoi je travaille (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 constater que je (seulement} _ veux que mon chargement se déclenche lorsque des modifications ont été apportées à mes fichiers CSS compilés (*.css) ou à mes fichiers HTML compilés. Si je modifie un fichier SCSS, je souhaite déclencher uniquement une boussole. Si je modifie un modèle de jade, je souhaite uniquement activer le compilateur jade vers HTML. Je pense que vous pouvez voir ce qui se passe. Vous pouvez jouer avec cela, juste être intelligent à ce sujet, car vous pourriez être pris dans une boucle infinie.

Enfin, vous devez lancer ces processus. J'aime tous les attacher à ma tâche principale, car mon fichier grunt est simplement ça doux. 

// Default task.
grunt.registerTask('default', ['livereload-start', 'connect', 'regarde']);

Maintenant, quand vous lancez grunt dans la CLI, vous devriez (espérons-le peut-être, vous croiser les doigts) obtenir quelque chose comme ceci:

Running "connect:livereload" (connect) task
Starting connect web server on localhost:9999.

Naviguez jusqu'à http://localhost:9999/yourpage.html et regardez la magie se produire.

plein gruntfile ici.package complet.json complet ici.

14
imjared

Je sais que c'est un peu vieux mais que je peux aider quelqu'un . Dans le fichier Gruntfile.js, ajouter "options"

sass: {
    files: 'scss/**/*.scss',
    tasks: ['sass'],
    options: {
      livereload: true,
    }
  }

Dans l'index, ajoutez:

<script src="http://localhost:35729/livereload.js"></script>
0
Panta Alejandro

Voici une solution basée sur Gulp au lieu de Grunt et du Gulpfile.js suivant pour que livereload fonctionne:


var gulp = require('gulp');
var connect = require('connect');
var connectLivereload = require('connect-livereload');
var opn = require('opn');
var gulpLivereload = require('gulp-livereload');

var config = {
    rootDir: __dirname,
    servingPort: 8080,

    // the files you want to watch for changes for live reload
    filesToWatch: ['*.{html,css,js}', '!Gulpfile.js']
}

// The default task - called when you run `gulp` from CLI
gulp.task('default', ['watch', 'serve']);

gulp.task('watch', ['connect'], function () {
  gulpLivereload.listen();
  gulp.watch(config.filesToWatch, function(file) {
    gulp.src(file.path)
      .pipe(gulpLivereload());
  });
});

gulp.task('serve', ['connect'], function () {
  return opn('http://localhost:' + config.servingPort);
});

gulp.task('connect', function(){
  return connect()
    .use(connectLivereload())
    .use(connect.static(config.rootDir))
    .listen(config.servingPort);
});
0
Dmitri Zaitsev