LiveReload with Grunt?

Question

I've consulted this answer as a starting point, in addition to the watch github page.

My watch task looks like this:

watch: {
  less: {
    files: ['less/**/*.less'],
    tasks: ['less'],
    options: {
      livereload: true
    }
  },
  handlebars: {
    files: ['templates/**/*.hbs'],
    tasks: ['handlebars'],
    options: {
      livereload: true
    }
  }
}

First I tried with the browser extension, and then later I added this script (and verified that it is loaded) in my index.html

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

I also tried adding this to my watch js:

livereload: {
  files: ['dev/**/*'],
  options: {
    livereload: true
  }
}

I also have a connect task, and I've tried running grunt with or without it to no avail.

connect: {
  dev: {
    options: {
      port: 35729
    }
  }
}

And still no live-reload...

What's the exact command you use for launching? – conny Feb 22 '14 at 17:36 — conny, Feb 22 '14 at 17:36

strivek · Answer 1 · 2014-11-27T03:47:03.813

this is my Gruntfile.js and my connect version is 0.9.0, this config can use for different livereroad port

module.exports = function (grunt) {

require('load-grunt-tasks')(grunt);
require('time-grunt')(grunt);
grunt.initConfig({
    watch: {
        demo: {
            files: ['web/*.*'],
            options: {
                livereload: 5000
            }
        },
        dev:{
            files: ['web1/*.*'],
            options: {
                livereload: 3030
            }
        }
    },
    connect: {
        demo: {
            options: {
                base: "web",
                port: 1111,
                hostname: '*',
                livereload: 5000,
                open: {
                    target: 'http://127.0.0.1:1111'
                }
            }
        },
        dev:{
            options: {
                base: "web1",
                port: 2222,
                hostname: '*',
                livereload: 3030,
                open: {
                    target: 'http://127.0.0.1:2222'
                }
            }
        }
    }
})
grunt.registerTask('demo', ['connect:demo', 'watch:demo']);
grunt.registerTask('dev',['connect:dev','watch:dev']);

}

thank you for tip，this is my first answer in stackoverflow，I find this problem only in my chrome ， it can change port succes in mac10.10 safari and websocket is work fine — strivek, Nov 26 '14 at 16:39

score 0 · Answer 2 · answered Jan 06 '14 at 23:29

0

Does this work?

watch: {
  options: { livereload: true },
  less: {
    files: ['less/**/*.less'],
    tasks: ['less']
  },
  //...
}

Also try running in verbose mode (grunt do-something -v) to check that the livereload server starts and that the port is correct.

answered Jan 06 '14 at 23:29

ed.

2,696
3
22
25

Your js is exactly the same as my js, but the -v tip is kinda cool – dezman Jan 06 '14 at 23:52
It's not exactly the same, the difference was putting the options at the root of the watch object. – ed. Jan 07 '14 at 11:59
I am having exactly the same issue only with sass compilation instead of less. When i used the -v switch i can see that the Live reload server has been started on port 35729. When i make a change to one of the sass files the page reloads but nothing happens. Interestingly the output says: **Live reloading style\v4\sass\_core\_salvaged.scss...** So it looks like it is sending the changed scss file to the live reload server rather than the generated css file. How do i change this? – El Guapo Jun 04 '14 at 10:15

Mark Simon · Answer 3 · 2014-01-06T23:41:28.150

0

Watch has worked for me out of the box, without livereload. Have you tried removing the livereload options and the script include?

Then: grunt; grunt watch

(the default task does the build, then watch keeps an eye out for changes)

edited Jan 06 '14 at 23:41

answered Jan 06 '14 at 23:33

Mark Simon

612
1
6
17

LiveReload with Grunt?

3 Answers3