配置grunt-ts并使其与LiveReload一起使用

Question

我想在Yeoman/Grunt项目中使用TypeScript.要编译TypeScript我使用一个名为grunt-ts的grunt插件,.ts文件的编译工作正常,但实时重新加载不起作用:当我运行时grunt server我正确得到这个:

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

但是然后没有加载liveReload任务.这就是我如何配置关于grunt-ts的Gruntfile.js.

  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',
       ...
  ]);

您可以查看完整的Gruntfile.js:https://github.com/mimo84/tsyong/blob/master/Gruntfile.js

Answer 1

简短回答:删除手表配置行https://github.com/mimo84/tsyong/blob/master/Gruntfile.js#L46并添加类似https://github.com/mimo84/tsyong/blob/master/Gruntfile的内容.js#L60 但是对于ts.即

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

原因:那是因为当你要求grunt-ts观看文件夹时,grunt-ts将自己标记为异步任务.这意味着之后没有其他任务可以执行.与grunt-contrib-watch一样,我认为这就是为什么你必须将它作为最后一项任务:

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

总之,你只能看一个任务:)在你的情况下,它必须是grunt-contrib-watch.