CODEWITHSUNDEEP
node.jsgrunt-contrib-watchlivereloadgrunt-express-server
Mahtab Alam
Mahtab Alam

Reputation: 1870

Live reload using grunt-express-server and grunt-contrib-watch

I am using grunt-express-server and grunt-contrib-watch to get Livereload functionality for my development environment. But somehow browser reload is not working, watch task does listen to changes to the file but it does not result in reloading of the browser.

Below is the Gruntfile.js

module.exports=function(grunt){    

    grunt.loadNpmTasks('grunt-express-server');
    grunt.loadNpmTasks('grunt-contrib-watch');


    grunt.initConfig({   

    watch: {    
        options: {  livereload: true,  },
        express: {
                   files:  [ 'views/index.ejs','app.js' ],
                   tasks:  [ 'express:dev' ],
                   options: {livereload: true,
                            spawn: false
                            }
                 }
           }
        ,

    express: {
               options: {              
                     port:8080
                        },
               dev: {
                     options: {
                          script: 'app.js'
                              }
                    }
            }


  });

    grunt.registerTask('serve', [ 'express:dev', 'watch' ])

}

I have read this post grunt-express-server with contrib-watch and http://thanpol.as/grunt/Grunt-with-express-server-and-Livereload/ , but not able to figure out whats wrong.

Here is the link to code https://github.com/eMahtab/watch-reload

Here is the snapshot of grunt serve

enter image description here

Upvotes: 1

Views: 935

Answers (1)

Luis Johnson
Luis Johnson

Reputation: 11

You must include the Live Reload Script in your HTML:

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

Insert the above tag in your views/index.ejs file before your closing body tag

You can set a default port in your watch task:

watch: {    
    options: {  livereload: true,  },
    express: {
               files:  [ 'views/index.ejs','app.js' ],
               tasks:  [ 'express:dev' ],
               options: {livereload: 1338,
                        spawn: false,
                        }
             }
            }

The script with the custom port will be:

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

For more reference check the following examples.

Upvotes: 1

Related Questions