使用gulp进行打字稿编译

Question

按照angular 2快速入门指南，有人使用typescript编译器和tsconfig.json文件来处理它。我正在寻找使用gulp的方法，实际上似乎有办法实现这一点，但是我对使用角度2纠正实现感到有点困惑。

基本上gulp-typescript和gulp-tslint似乎是实现此目的的两个插件，不知怎的tsconfig.json文件也在这里发挥作用，虽然我不明白为什么。

任何人都可以提供实现上述实现的示例吗？我相信所有开发.ts文件都应该在src文件夹中，并且需要将javascript抽取到build文件夹。 （现在假设两个文件夹都设置了angular 2 quick start）

Answer 1

我已设置gulp从gulpfile.js/ 文件夹开始工作。在此文件夹中有index.js，config.js和tasks/文件夹，tasks/typescript.js中的任务是编译TypeScript（任务文件夹有15个其他任务）。所以我没有一个巨大的gulpfile.js而是一个可管理的块，每个块只做一件事......

gulpfile.js / index.js

var gulp = require('gulp');
var config = require('./config.js');
var plugins = require('gulp-load-plugins')();
    plugins.brsync = require('browser-sync').create();
    plugins.builder = require('systemjs-builder');

function run(name) {
  return require('./tasks/' + name)(gulp, plugins, config);
}
// ...other tasks, in alphabetical order! (:
gulp.task('typescript',     run('typescript'));

gulpfile.js / config.js

var distDir           = 'dist';
var staticDir         = isGAE() ? '/static' : '';

module.exports = {
  SRC: {
    TYPESCRIPT:       'src/scripts/**/*.ts',
  },
  DST: {
    MAPS:                                   './maps',
    SCRIPTS:          distDir + staticDir + '/scripts',
  },
};

gulpfile.js /任务/ typescript.js

module.exports = function (gulp, plugins, CONFIG) {
  return function typescript() {

    var tsProject = plugins.typescript.createProject('tsconfig.json');
    var tsReporter = plugins.typescript.reporter.fullReporter();

    var stream = gulp
      .src(CONFIG.SRC.TYPESCRIPT, { since: gulp.lastRun('typescript') })
      .pipe(plugins.sourcemaps.init())

      .pipe(plugins.typescript(tsProject, undefined, tsReporter))

      .pipe(plugins.sourcemaps.write(CONFIG.DST.MAPS,
                                     {sourceMappingURLPrefix: '/scripts'}))
      .pipe(gulp.dest(CONFIG.DST.SCRIPTS))
      .on('error', plugins.util.log);

    return stream;
  };
};

gulpfile.js /任务/ watch.js

module.exports = function (gulp, plugins, CONFIG) {
  return function watch() {
    plugins.brsync.init(CONFIG.BRSYNC);

    gulp.watch(CONFIG.SRC.TEST,           () => queue_tasks(['karma']));
    gulp.watch(CONFIG.SRC.TYPESCRIPT,     () => queue_tasks(['typescript'], brsync_reload));
  };
};

我有issue with gulp watch：如果您正在观看文件，请处理多个文件并将其全部保存，它会多次运行任务，这可能很烦人。检查链接以实现queue_tasks()功能...

另请注意，我使用的是Gulp 4：

gulp.src(CONFIG.SRC.TYPESCRIPT, { since: gulp.lastRun('typescript') })

我已在src()选项since中添加了缓存文件，并仅将更改过的文件传递给管道。 我在2天前实现了这个并没有用打字稿文件测试它（在其他地方有效），所以如果有问题就把它删除......