Grunt Live-Reload via Watch

Question

I'm trying to configure grunt to livereload js and less/css files on changes. While grunt does correctly "watch" and execute assigned tasks, it does not livereload the files. Below is my configuration, does anyone see what is wrong?

module.exports = function(grunt) {
grunt.initConfig({
    pkg: grunt.file.readJSON("package.json"),
    jshint: {
        files: ["Gruntfile.js", "src/javascripts/**/*.js"],
        options: {
            globals: {
                jQuery: true,
                console: true,
                module: true
            }
        }
    },
    concat: {
        options: {
            stripBanners: true,
            banner: "/*! <%= pkg.name %> - v<%= pkg.version %> - <%= grunt.template.today('yyyy-mm-dd') %> */\n",
            separator: "\n"
        },
        js: {
            src: ["src/javascripts/main.js", "src/javascripts/**/*.js"],
            dest: "../app/assets/javascripts/application.js"
        },
        less: {
            src: ["src/stylesheets/**/*.less"],
            dest: "../app/assets/stylesheets/application.less"
        }
    },
    watch: {
        js: {
            files: ["<%= jshint.files %>"],
            tasks: ["jshint", "concat:js"],
            options: {
                livereload: true
            }
        },
        less: {
            files: ["<%= concat.less.src %>"],
            tasks: ["concat:less"],
            options: {
                livereload: true
            }
        }
    }
});

grunt.loadNpmTasks("grunt-contrib");

grunt.registerTask("default", ["jshint", "concat"]);
};

Note: I have included the following script tag within the html head tag.

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

score 9 · Accepted Answer · answered May 14 '13 at 22:03

9

Your config is trying to start 2 live reload servers on the same port. If you would like 1 live reload server to trigger on all your watch targets then just add 1 livereload option at the task level:

watch: {
  options: {
    livereload: true
  },
  js: {
    files: ["<%= jshint.files %>"],
    tasks: ["jshint", "concat:js"],
  },
  less: {
    files: ["<%= concat.less.src %>"],
    tasks: ["concat:less"],
  }
}

answered May 14 '13 at 22:03

Kyle Robinson Young

13,732
1
47
38

I reconfigured watch as you suggested above, but unfortunately, live-reload still does not execute. – Ari May 14 '13 at 22:13
6

You can do `grunt watch --verbose` and it will tell you when it reloads in the console. Although I noticed you're using `grunt.loadNpmTasks('grunt-contrib')`... that uses an older version of the watch task which doesn't have live reload. I recommend *not* using `grunt-contrib` and loading each module individually. – Kyle Robinson Young May 14 '13 at 22:23
What does "loading modules individually" mean ? I have "grunt-contrib-watch": "~0.6.0" in my package, I tried loading with load-grunt-tasks and also manually with loadNpmTasks, but when a file changes, watch tells me "Task 'reload' not found" – Rayjax Mar 18 '14 at 17:19
1

@Rayjax It sounds like your Gruntfile is trying to use a `reload` task. grunt-contrib-watch doesn't provide a `reload` task. It only provides a `watch` task. – Kyle Robinson Young Mar 18 '14 at 18:58
True, I had remove the grunt-reload plugin but left a call to "reload" in the watch task. Fixed it by removing that call, works nice – Rayjax Mar 19 '14 at 13:39

score 0 · Answer 2 · answered Feb 29 '16 at 20:07

0

I was missing the script tag and after adding this

it started working for me. :)!

Thanks,

answered Feb 29 '16 at 20:07

Shobhit

167
1
2
5

Grunt Live-Reload via Watch

2 Answers2