Pourquoi n'est-ce pas grunt-contrib-montre livereload de travail?

J'ai du mal à obtenir Grunt "live reload" capacité (tel que mis en œuvre dans grunt-contrib-montre) pour travailler dans mon application. J'ai finalement peu la balle, et essayé de faire un exemple minimal. J'espère que quelqu'un peut facilement remarquer ce qu'il manque.

Structure De Fichier:

├── Gruntfile.js
├── package.json
├── index.html

package.json

{
  "name": "livereloadTest",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.2",
    "grunt-contrib-watch": "~0.5.3"
  }
}

Gruntfile.js

module.exports = function(grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        watch: {
            src: {
                files: ['*.html'],
                options: { livereload: true }
            }
        }
    });
    grunt.loadNpmTasks('grunt-contrib-watch');
};

index.html

<!doctype html>
<html>
<head><title>Test</title></head>
<body>

<p>....</p>
<script src="//localhost:35729/livereload.js"></script>

</body>
</html>

Je puis exécutez grunt watch et rien coups. Toutefois, aucune fenêtre de navigateur s'ouvre automatiquement (devrait?).

Quand j'ouvre chrome à http://localhost:35729/, j'obtiens ce json:

{"tinylr":"Welcome","version":"0.0.4"}

et d'essayer un autre chemin sur ce port me donne

{"error":"not_found","reason":"no such route"}

OriginalL'auteur Zach Lysobey | 2014-02-20

  1. 16

    http://localhost:35729/ est l'URL du live reload serveur. Il est seulement utilisé pour la gestion de vivre recharger, pas de service de votre site web réel.

    Généralement, on peut utiliser une grunt-contrib-se connecter pour servir les sites statiques avec grunt. Puis afficher leur site en allant sur localhost:8000 ou à l'endroit que vous avez configuré pour résider. Mais, en fonction de vos besoins, il pourrait être apache, nginx, etc servir des fichiers.

    Il y a un livereload option sur grunt-contrib-se connecter en tant que bien. Cela ne injecte le <script src="//localhost:35729/livereload.js"></script> balise dans votre code HTML et rien d'autre.

    Il fonctionne! Merci! Je souhaite que le montre de la documentation a été un peu plus clair que quelque chose comme cela est nécessaire...

    OriginalL'auteur Kyle Robinson Young

  2. 7

    Voici un moyen simple de savoir comment vous pourriez mettre en place que. Assurez-vous d'avoir la grunt-contrib-watch et grunt-contrib-connect plugins installés. C'est en supposant que votre Gruntfile.js est dans votre répertoire racine de votre projet. assurez-vous également d'ajouter <script src="//localhost:35729/livereload.js"></script> juste avant votre balise body de clôture </body> et que vous avez un index fichier. Lorsque vous tapez grunt server dans le terminal aller à http://localhost:9000 et vous devriez être tous ensemble.

    module.exports = function(grunt) {

  grunt.initConfig({
  pkg: grunt.file.readJSON('package.json'),

  watch: {
    options: {
      livereload: true,
    },
    css: {
      files: ['css/**/*.css'],
    },
    js: {
      files: ['js/**/*.js'],
    },
    html: {
      files: ['*.html'],
    }
  },
  connect: {
    server: {
      options: {
        port: 9000,
        base: '.',
        hostname: '0.0.0.0',
        protocol: 'http',
        livereload: true,
        open: true,
      }
    }
  },
});


grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-connect');

grunt.registerTask('server', ['connect','watch']);

};
    ce code fonctionne!!
    Je ne pouvais pas comprendre comment faire de la livereload de travail, mais en regardant votre config et ajouter le nom d'hôte et livereload dans l'connecter/serveur/options fait le tour
    Non non non non non, <script src="//localhost:35729/livereload.js"></script> ne doit PAS être ajouté manuellement. Il sera auto-injecté par le grunt-contrib-connect plugin, si c'est bien fait. Vous ne voulez pas vous embêter avec une version déployée

    OriginalL'auteur hot_barbara