configurationgrunt-ts并使其与LiveReload配合使用

我正在尝试在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任务不加载。 这就是我如何configurationGrunt-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

简短的回答：删除手表configuration行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将自己标记为一个asynchronous任务。 这意味着之后不能执行其他任务。 它与grunt-contrib-watch一样，我想这就是为什么你必须把它作为最后的任务：

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

总之，你只能有一个任务做你的观察:)在你的情况下，它将不得不是咕噜，贡献。

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

并不完全是答案，而是深入到底层：快速的工作stream程。