Grunt apply changes after edit js files

Question

I created the first project using Grunt. I have a problem, because after editing js files I need to restart server to apply the changes. When I edit JADE files I do not need restart server. And another problem: How do I add an auto-refresh browser after file changed?

My gruntfile:

'use strict';

module.exports = function (grunt) {
    // show elapsed time at the end
    require('time-grunt')(grunt);
    // load all grunt tasks
    require('load-grunt-tasks')(grunt);

    grunt.initConfig({
        reload: {
            port: 9000,
            proxy: {
                host: 'localhost'
            }
        },
        // Watch Config
        watch: {
            files: ['views/**/*','routes/*'],
            taksks: 'workon reload',
            options: {
                nospawn: true // Without this option specified express won't be reloaded
            },
            express: {
                files:  [ 'app.js', '!**/node_modules/**', '!Gruntfile.js' ],
                tasks:  [ 'express:dev' ],
                options: {
                    nospawn: true // Without this option specified express won't be reloaded
                }
            }
        },


        // Clean Config
        clean: {
            dist: {
                files: [{
                    dot: true,
                    src: [
                        '.tmp',
                        'dist/*',
                        '!dist/.git*'
                    ]
                }]
            },
            server: ['.tmp']
        },
        // Express Config
        express: {
            options: {
              // Override defaults here
            },
            dev: {
                options: {
                    script: './bin/www'
                }
            }
        },
        // Open Config
        open: {
            site: {
                path: 'http://localhost:9000',
                app: 'chrome'
            }
        }

    });

    // Register Tasks
    // Workon
    grunt.registerTask('workon', 'Start working on this project.', [
        'express:dev',
        'open:site',
        'watch'
    ]);


    // Restart
    grunt.registerTask('restart', 'Restart the server.', [
        'express:dev',
        'open:site',
        'reload',
        'watch'

    ]);


    // Build
    grunt.registerTask('build', 'Build production ready assets and views.', [
        'clean:dist',
        'concurrent:dist',
        'useminPrepare',
        'imagemin',
        'concat',
        'cssmin',
        'uglify',
        'copy:dist',
        'rev',
        'usemin',
    ]);

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


};

EDIT: After reload server page load very slow:

Why?

Answer 1

  livereload: {
        options: {
          livereload: '<%= connect.options.livereload %>'
        },
        files: [

        ]
      }

I think this section of watch can help you