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>

Hyehyena

Answer 1

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"],
  }
}

Seline

I reconfigured watch as you suggested above, but unfortunately, live-reload still does not execute. – Hyehyena

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. – Seline

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" – Machos

@Machos 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. – Seline

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 – Machos

Answer 2

I was missing the script tag and after adding this

it started working for me. :)!

Thanks,

Generation