Định cấu hình grunt-ts và làm cho nó hoạt động với LiveReload

Question

Tôi đang cố gắng sử dụng TypeScript bên trong dự án Yeoman/Grunt. Để biên dịch nguyên cảo tôi sử dụng một grunt grunt cắm gọi-ts, biên soạn các file .ts làm việc tốt, nhưng tải lại sống không hoạt động: Khi tôi chạy grunt server tôi một cách chính xác được điều này:

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

Nhưng sau đó nhiệm vụ liveReload không được tải. Đây là cách tôi đã cấu hình Gruntfile.js của mình về 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', 
     ... 
    ]); 

Bạn có thể có một cái nhìn tại toàn bộ Gruntfile.js: https://github.com/mimo84/tsyong/blob/master/Gruntfile.js

Answer 1

Câu trả lời ngắn: loại bỏ các dòng đồng hồ cấu hình https://github.com/mimo84/tsyong/blob/master/Gruntfile.js#L46 và thêm một cái gì đó giống như https://github.com/mimo84/tsyong/blob/master/Gruntfile.js#L60 Nhưng đối với ts. ví dụ:

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

Lý do: Đó là bởi vì khi bạn hỏi grunt-ts để xem một thư mục, đánh dấu grunt-ts chính nó như là một nhiệm vụ async. Điều này có nghĩa rằng sau đó không có nhiệm vụ khác có thể thực hiện sau đó. Nó tương tự với grunt-contrib-watch Tôi nghĩ đó là lý do tại sao bạn phải có nó như là nhiệm vụ cuối cùng:

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

Nói tóm lại bạn chỉ có thể có một nhiệm vụ làm xem của bạn :) Trong trường hợp của bạn nó sẽ phải là đồng hồ gắt gỏng.

Answer 2

tôi sử dụng một cách rất nhanh chóng và đơn giản, sử dụng browserify & typescriptifier (< 2s tải lại):

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

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

Không chính xác câu trả lời nhưng đi đến điểm cơ bản: quy trình làm việc nhanh .