配置 grunt-ts 并使其与 LiveReload 一起工作答案

【问题标题】：Configuring grunt-ts and make it work with LiveReload配置 grunt-ts 并使其与 LiveReload 一起工作
【发布时间】：2013-08-08 22:57:06
【问题描述】：

我正在尝试在 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 任务没有加载。这就是我配置 Gruntfile.js 关于 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',
       ...
  ]);

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

【问题讨论】：

标签： node.js typescript gruntjs yeoman livereload

【解决方案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。

【讨论】：

【解决方案2】：

我使用一种非常快速简单的方式，使用browserify & typescriptifier (

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

不完全是答案，但要说到基本点：快速工作流程。

【讨论】：