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。

Answer 2

我使用browserify＆amp;快速而简单的方法typescriptifier（＆lt; 2s reload）：

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

不完全是答案，而是指向基本点：快速工作流程。

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

2 个答案: