使用 gulp 进行打字稿编译答案

【问题标题】：Use gulp for typescript compilation使用 gulp 进行打字稿编译
【发布时间】：2016-01-25 22:43:55
【问题描述】：

按照 angular 2 快速入门指南，那里的人使用 typescript 编译器和 tsconfig.json 文件来使用它。我一直在寻找为此使用 gulp 的方法，并且确实似乎有办法实现这一点，但是我对正确使用 angular 2 的实现有点困惑。

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

谁能提供实现上述目标的示例？我相信所有开发 .ts 文件都应该在 src 文件夹中，并且需要将 javascript 抽到 build 文件夹中。（假设现在两个文件夹都从angular 2 quick start 设置）

【问题讨论】：

One of the most popular ng2 seed projects uses gulp
@drewmoore 是的，我实际上偶然发现了它，那里发生了很多事情，我所需要的只是建立一个支持 sass 和 ts 的项目，因此这个问题，因为我不是能够分解该种子回购以找到我需要的这两件事。它对我来说缺乏解释。
@Ilja 我的团队过去常常将 gulp 与 angular2 和 sass 一起使用，但是将所有文件放入流中总是存在很多问题，如果没有大量的维护。只是一个友好的建议。您是否考虑过使用 npm 作为构建过程，在 package.json 中设置 npm 脚本？

标签： javascript typescript gulp angular

【解决方案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/tasks/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/tasks/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 天前实现了此功能，并没有使用 typescript 文件对其进行测试（在其他地方也可以使用），因此如果有问题，请将其删除...~~

【讨论】：