How to use grunt-contrib-livereload?

Question

I am trying to use grunt-contrib-livereload but can't seem to figure it out. readme seems to skip everything I need to explain, and then ends with an example that doesn't work when I try it seems to be directly related to the documentation. I was looking for the best explanation on a blog or tutorial or something else, but couldn't find it. Can someone explain how to get started with this tool?

Here are the questions I have based on readme :

The documentation states that the “download from sheet” task should be transferred to the list of files that have been changed, "but how to transfer this list of files? The example does not seem to illustrate this. Does this list take into account?

Is grunt-contrib-connect required? What is he doing and how to use it? Do I need to learn how to connect before trying to use the download function?

The readme mentions middleware that "must be first inserted" but inserted into what, what else? And how is it inserted?

And I suppose I don’t understand how I need to manipulate the ports. “All browsers listening on the stove port will restart”, but how do I know which browser is listening on which port? Do I need to know everything about ports before I can try using the download function? (Any suggestion on how best to find out about this?)

Finally, in this example, there is a folderMount function that does not seem to be related to any documentation before. What is it and do I need it?

I think I'm asking if anyone can please:

• point me to a tutorial that is much more efficient than the current readme;
• explain these inexplicable parts of readme if these answers are what I need to understand the plugin;
• or provide a functional example with some explanation of why it is functional.

Answer 1

Live reboot is now built into grunt-contrib-watch version 0.4.0 . grunt-contrib-livereload and grunt-regarde will be deprecated.

Now just set the livereload option to true in your configuration and it will create a live reboot server and then reboot after completing the tasks:

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

By default, the reboot server will be running on port 35729 . Therefore, to activate reloading on your page, just add <script src="http://localhost:35729/livereload.js"></script> to your page.

More about docs: https://github.com/gruntjs/grunt-contrib-watch#live-reloading

Answer 2

Edit: check version information. grunt-contrib-watch liver support is now supported.

What a doozy. I ran into problems with this, so let me do my best to explain (or at least run you). Keep in mind that this is how I configure and it seems to work most of the time.

First you need to make sure that you have tricked your package.json with the correct dependencies. I'm not sure that working with the liver works with the task baked in the “clock”, and I have been using grunt-regarde recently. My .json package usually looks like this:

 "dependencies": { "grunt": "~0.4.x", "grunt-contrib-livereload": "0.1.2", "grunt-contrib-connect": "0.2.0", "grunt-regarde": "0.1.1" }, 

Obvi you want grunt (duhhh), livereload, connect seems to help with installation folders, and this is similar to grunt-watch, it just seems to work better (I forgot why).

You could make your package.json even better by specifying the load function in your own devDependencies function if you are so inclined. Now run your good old fasioned npm install to get the goodies in your project.

Speak gruntfiles:

As you probably know, the grunt file does the magic. Somewhere at the bottom of your grunt file you need to specify

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

At the top of your grunt file, we will want to add some utilities to load into the file. In the /*global module:false*/ section, navigate and add var lrSnippet = require('grunt-contrib-livereload/lib/utils').livereloadSnippet; .

After that, you really don't need to learn the connection, you just have to use it. Check out my style:

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

This happens before module.exports = function(grunt) {

Now let me go into the meat of the grunt file. Again, I forget what the connection does, but this is where the magic of middleware begins. In your modules.exports add:

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

Now we want the files to be viewed. I like to set up several different tasks, because I don’t want the whole rooting process to be performed every time I save the CSS file. Here's what I'm working with (add to 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'] } }, 

You can see that I only need to shoot from the list if changes have been made to my compiled css ( *.css ) or to my compiled html. If I edit the SCSS file, I want to disable only the compass. If I edit a jade template, I only want to run jade in the HTML compiler. I think you can see what is happening. You can play with it, just be smart, because you can get into an endless cycle.

Finally, you need to hide these processes. I like to connect them all with my main task, because my gruntfile is just cute.

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

Now, when you run grunt in the CLI, you should (hopefully cross your fingers) get something like this:

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

Go to http://localhost:9999/yourpage.html and see how the magic happens.

full grunt file here full package.json here.

Answer 3

Here is a Gulp based solution instead of Grunt and the following Gulpfile.js to get livereload :

 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); });
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); }); 

Answer 4

I know this is a little old, but can help someone. In Gruntfile.js add "options":

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

In the add index:

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