Search code examples
javascriptgruntjstypescriptwatchlivereload

live reload with grunt and typescript on windows


I am trying to get grunt to reload the browser when it compiles the typescript. It is correctly watching the files and compiling them but I can not figure out how to reload the browser. I tried setting livereload: true in various places with no luck. I left the various livereload sections I tried below. i tried them one at a time and all together.

module.exports = function (grunt) {
    grunt.loadNpmTasks('grunt-typescript');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-contrib-livereload');
    grunt.loadNpmTasks('grunt-contrib-connect');
    grunt.loadNpmTasks('grunt-open');

    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        connect: {
            server: {
                options: {
                    port: 8181,
                    livereload: true,
                }
            }
        },
        typescript: {
            base: {
                src: ['js/src/**/*.ts'],
                dest: 'js/main.js',
                options: {
                    module: 'amd',
                    target: 'es5',
                    livereload: true
                }
            }
        },
        watch: {
            files: 'js/src/**/*.ts',
            tasks: ['typescript'],        
            options: {
                livereload: true,
            }
        },
        open: {
            dev: {
                path: 'http://localhost:8181/index.html',
                app: 'chrome'
            }
        }
    });

    grunt.registerTask('default', ['typescript', 'connect', 'open', 'watch']);
};

Solution

  • Make sure that you're following the instructions for including the live reload script as documented here. An example would be to include this script at the end of the body (assuming the default port):

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