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"}
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.
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']);
};
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With