Why isn't grunt-contrib-watch livereload working?

StackOverflow https://stackoverflow.com/questions/21913363

Domanda

I'm struggling to get Grunt's "live reload" ability (as implemented in grunt-contrib-watch) to work in my app. I finally bit the bullet, and tried making a minimal example. Hopefully someone can easily notice what's missing.

File Structure:

├── 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>

I then run grunt watch and nothing blows up. However, no browser window opens automatically (should it?).

When I open chrome at http://localhost:35729/ I recieve this json: 

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

and trying any other path on that port gives me 

{"error":"not_found","reason":"no such route"}
È stato utile?

Soluzione

http://localhost:35729/ is the URL to the live reload server. It is only used for managing live reload, not serving your actual website.

Typically, one would use grunt-contrib-connect to serve static sites with grunt. Then view their site by going to localhost:8000 or wherever you've configured it to reside. But depending on your needs, it could be apache, nginx, etc serving files as well.

There is a livereload option on grunt-contrib-connect as well. This only injects the <script src="//localhost:35729/livereload.js"></script> tag into your HTML and nothing else.

Altri suggerimenti

Here's a really simple way to how you could set that up. Just make sure you have the grunt-contrib-watch and grunt-contrib-connect plugins installed. This is assuming your Gruntfile.js is in your root directory of your project. also be sure to add <script src="//localhost:35729/livereload.js"></script> just before your closing body tag </body> and that you have an index file. When you type grunt server into terminal go to http://localhost:9000 and you should be all set up.

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']);

};
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top