Configuring grunt-ts and make it work with LiveReload

Question

I am trying to use TypeScript inside a Yeoman / Grunt project. To compile TypeScript I use a grunt plugin called grunt-ts, the compilation of the .ts files works just fine, but the live reload doesn't works: When I run grunt server I correctly get this:

Running "ts:dev" (ts) task
Compiling.
Success: 3.37s for 2 typescript files
Watching all Typescript files under : /home/mimo/webroot/tsyong/app/scripts

But then the liveReload task is not loaded. This is how I configured my Gruntfile.js about grunt-ts.

  grunt.initConfig({
    ...
    ts: {
      options: {                    // use to override the default options, http://gruntjs.com/configuring-tasks#options
        target: 'es3',            // es3 (default) / or es5
        module: 'commonjs',       // amd , commonjs (default)
        sourcemap: true,          // true  (default) | false
        declaration: false,       // true | false  (default)
        nolib: false,             // true | false (default)
        comments: false           // true | false (default)
      },
      dev: {                          // a particular target   
        src: ['<%= yeoman.app %>/scripts/{,*/}*.ts'], // The source typescript files, http://gruntjs.com/configuring-tasks#files
        reference: '<%= yeoman.app %>/scripts/reference.ts',  // If specified, generate this file that you can use for your reference management
        out: '<%= yeoman.app %>/scripts/out.js',         // If specified, generate an out.js file which is the merged js file     
        watch: '<%= yeoman.app %>/scripts/',              // If specified, configures this target to watch the specified director for ts changes and reruns itself.
        options: {                  // override the main options, http://gruntjs.com/configuring-tasks#options
          sourcemap: true,
          declaration: true
        },
      },
      build: {                        // another target 
        src: ['<%= yeoman.app %>/scripts/*.ts'],
        options: {                  // overide the main options for this target 
          sourcemap: false,
        }
      },
    },
...

...
grunt.task.run([
      ...
      'ts',
       ...
    ]);

...

  grunt.registerTask('build', [
       ...
    'ts',
       ...
  ]);

You can have a look at the full Gruntfile.js: https://github.com/mimo84/tsyong/blob/master/Gruntfile.js

Answer 1

Short answer: remove the watch config line https://github.com/mimo84/tsyong/blob/master/Gruntfile.js#L46 and add something like https://github.com/mimo84/tsyong/blob/master/Gruntfile.js#L60 But for ts. i.e.

  ts: {
    files: ['<%= yeoman.app %>/scripts/{,*/}*.ts'],
    tasks: ['ts:dev']
  },

Reason: That's because when you ask grunt-ts to watch a folder, grunt-ts marks itself as an async task. This means that then no other tasks can execute afterwards. Its the same with grunt-contrib-watch I think which is why you must have it as the last task:

grunt.task.run([
  'clean:server',
  'concurrent:server',
  'ts',
  'connect:livereload',
  'open',
  'watch' // last task
]);

In short you can only have one task do your watching :) In your case it would have to be grunt-contrib-watch.

Answer 2

I use a very fast and simple way, using browserify & typescriptifier (<2s reload):

module.exports = function (grunt) {

  grunt.initConfig({
    clean: {
      dev: ['dest/**/*.*']
    },

    browserify: {
      dev: {
        src: ['src/root.ts'],
        dest: 'dest/App.js',
        options: {
          external: ['angular'],
          transform: ['typescriptifier'],
          debug: true,
          bundleOptions: { debug: true },
          browserifyOptions: { debug: true }
        }
      }
    },
    express: {
      dev: {
        options: {
          bases: ['src'],
          port: 5000,
          hostname: '0.0.0.0',
          livereload: false
        }
      }
    },
    watch: {
      ts: {
        files: ['src/**/*.ts', '!src/**/*.d.ts'],
        tasks: ['dest'],
        options: {
          livereload: true,
          debug: false,
          debounceDelay: 100
        }
      },
      html: {
        files: ['src/**/*.css', 'src/**/*.html'],
        options: {
          livereload: true,
          debug: false,
          debounceDelay: 100,
          spawn: false
        }
      }
    }
  });

  grunt.loadNpmTasks('grunt-express');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-browserify');
  grunt.loadNpmTasks('grunt-contrib-clean');

  grunt.registerTask('dev', ['rebuild', 'express:dev', 'watch' ]);
  grunt.registerTask('build', ['browserify:dev']);
  grunt.registerTask('rebuild', ['clean:dev', 'build']);
};

See https://www.npmjs.org/package/typescriptifier

Not exactly the answer but goes to the underlying point: fast workflow.