Configuring grunt-ts and make it work with LiveReload

gruntjs, livereload, node.js, typescript, yeoman

Solution

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.

Problem

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

Original source