5

我正在尝试在 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

4

2 回答 2

5

简短的回答：删除手表配置行https://github.com/mimo84/tsyong/blob/master/Gruntfile.js#L46并添加类似https://github.com/mimo84/tsyong/blob/master/Gruntfile .js#L60 但对于 ts。IE

  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。

于 2013-08-07T16:12:09.633 回答
1

我使用了一种非常快速和简单的方法，使用browserify& typescriptifier(<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

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

于 2014-05-28T15:49:15.210 回答