grunt contrib watch - Get livereload to work with Sails.js

Question

I am new to both Sails and grunt so I might be missing the obvious. I am trying to automatically refresh my sails app in the browser whenever files change.

I start the app with sails lift and it runs on the default port 1337.

I tried adding options: {livereload:true} to my grunt-contrib-watch configuration but as far as I understand I need to somehow inject the livereload JavaScript into my page?

I tried to use grunt-contrib-connect with the livereload option to inject the JavaScript but it seems to just start another server. When I navigate to the started server (localhost:8000) I just see the folder structure. The livereload JavaScript is injected however.

I want to avoid the livereload Chrome Plugin if possible.

What's the best way to inject the livereload JavaScript into my Sails app? Or should I just use another tool like Browsersync?

Thank you! :)

Answer 1

1. Add livereload option to tasks/config/watch.js

    module.exports = function(grunt) {

     grunt.config.set('watch', {
        api: {

            // API files to watch:
            files: ['api/**/*', '!**/node_modules/**']
        },
        assets: {

            // Assets to watch:
            files: ['assets/**/*', 'tasks/pipeline.js', '!**/node_modules/**'],

            // When assets are changed:
            tasks: ['syncAssets' , 'linkAssets']
        },
        // ADD THIS 
        options: {
          livereload: true,
        },
    });

    grunt.loadNpmTasks('grunt-contrib-watch');
};

2. Add livereload script to your layout, somewhere at the end before </body> tag, by default to views/layout.ejs:

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

Except of localhost you can use IP or DNS name of server

This will refresh page if a file is changed in api or assets folder.

By default Ggrunt-contrib-watch uses 35729 port. You can point other port like livereload: 8000

• Similar question, but not so detailed answer
• Ggrunt-contrib-watch docs

EDIT: Well, I do not really know if this is totally correct, but looks like you can override layout settings in config/env/development.js. Add something like:

module.exports = {
    views: {
        layout: 'dev'
    }
}

Then you can create separate layout file views/dev.ejs where you can add livereload script and other development params. Also you can add livereload key in the same way.