配置grunt-ts並使其與LiveReload配合使用

Question

我正嘗試在Yeoman/Grunt項目中使用TypeScript。要編譯打字稿我用一個咕嚕叫插件咕嚕-TS時，.ts文件的編制工作得很好，但現場reload不工作： 當我運行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'] 
    }, 

原因：這是因爲當你問咕嚕-TS觀看文件夾，咕嚕-TS標誌本身作爲異步任務。這意味着之後不能執行其他任務。它與咕嚕-的contrib手錶，我認爲這就是爲什麼你必須有它作爲最後的任務是相同的：

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

總之你只能有一個任務，做你的觀賞:)在你的情況下，將必須是grunt-contrib-watch。

Answer 2

我用一個非常快速和簡單的方法，使用browserify & typescriptifier（< 2S重裝）：

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

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

不完全的答案，但去的基本觀點：快速的工作流程。