Use grunt with browser-refresh

Question

I'm currently using browser-refresh to restart my node server every time I make a change to my server file. I want to take this further and have my browser refresh/reload every time I make a change to an HTML file. I'm using handlebars for the client, so I have .hbs files in my views directory. I thought browser-refresh was supposed to be able to refresh the browser as well, but it's not working for me.

For grunt, I have the following tasks installed:

grunt.loadNpmTasks('grunt-express-server');
grunt.loadNpmTasks('grunt-express');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.loadNpmTasks('grunt-exec');
grunt.loadNpmTasks('grunt-open');
grunt.loadNpmTasks('grunt-express-runner');

I don't think I need all of these, but I want to find something that works. I'm able to restart my server with grunt-exec, but I already have an alias for browser-refresh, so I don't really need that.

I should also note that in my app.js server file, I'm using app.use('/', routes); where var routes = require('./routes/index');. So, when my app loads (using node app.js), it goes directly to http://localhost:3000/users/login.

Thanks in advance.

Answer 1

Using the grunt-contrib-watch and setting the Live reload option to true, will enable live reloads and grunt auto rebuild.

For example, in your gruntfile.js:

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

For the rebuild of your site, (using the grunt-contrib-watch plugin), simply type

grunt watch

To auto rebuild your website on changes, have a look at an example usage of the grunt watch command below:

gruntfile.js

module.exports = function (grunt) {

  grunt.initConfig({

    exec: {
      server: 'node server'
    },

    // Other JS tasks here
    // ...


    watch: {
      css: {
        files: ['scss/**/*.scss'],
        tasks: ['sass'],
        options: {
          spawn: false
        }
      },

      javascript: {
        files: ['js/*.js'],
        tasks: ['uglify']
      },

      options: {
        livereload: true,
      },

    },

  });

  grunt.registerTask('server', ['exec:server']);

  // Minify JS and create CSS files
  grunt.registerTask('build', ['uglify', 'sass']);

  // Do what you expect the default task to do
  grunt.registerTask('default', ['build', 'exec:server']);
};

More info here: https://github.com/gruntjs/grunt-contrib-watch/blob/master/docs/watch-examples.md#enabling-live-reload-in-your-html