使用 Gulp 为 Angular 构建 Typescript

Question

我正在尝试根据Johnpapa's Angular Style Guide 设置一个 angularjs 项目，同时使用 TypeScript 和 Gulp 作为构建工具。我相信 Gulp 目前比 Grunt 更受推荐，但我对 Gulp 不是很有经验。

我有什么：

我的项目目前是这样的：

src/
   +- ts/        # contains .ts source files
   +- typings/   # contains .d.ts typing definitions
   +- html/      # contains .html files
dist/
   +- bundle.js  # single .js file containing compiled typescript and sourcemaps

按照角度样式指南，我为每个角度元素创建了一个单独的.ts 文件。

my-app.module.ts
----------------

angular.module('myApp', []);

用于模块的初始化，另一个用于控制器的简单实现：

my-controller.controller.ts
----------------------------

export class MyController {
    testString = 'test';
}

angular
    .module('myApp')
    .controller('MyController', MyController);

typescript 使用简单的tsconfig.json 进行配置。 （请注意，filesGlob 尚未激活——它将在 TypeScript 2.0 中可用）

tsconfig.json
-------------

{
  "exclude" : [
    "node_modules"
  ],
  "filesGlob" : [
    "./src/typings/index.d.ts",
    "./src/ts/**/*.ts",
    "!./node_modules/**/*.ts"
  ],
  "compilerOptions": {
    "noImplicitAny": true,
    "target": "es5",
    "sourceMap" : true,
    "outFile" : "./dist/bundle.js",
    "removeComments": false
  }
}

我想要什么：

我希望

• 让 Gulp 监视 ./src/ts/**/*.ts 中新的或更新的 .ts 文件
• 连接来自./src/ts/**/*.ts 的所有文件。这是 angular 正常工作所必需的。我尝试使用 requirejs 或 browserify 的其他方法无法找到其他 .ts 文件，而无需手动输入对这些文件的引用。
• 使用来自tsconfig.json 的定义进行编译。这将考虑到./src/typings/index.d.ts 中的类型（对于包括“角度”的外部模块）。还有源图。
• 可能需要一个 uglify 或 babelify 步骤来完成它。

我尝试了什么：

我尝试按照 typescriptlang handbook 中的手册进行操作，但这使用的是 browserify 并且不适用于 angular。

Gulp-typescript 也有关于 concatenating files 的注释，但 out 选项不能像这样工作：

var gulp = require('gulp');
var ts = require('gulp-typescript');
var tsProject = ts.createProject('tsconfig.json');

gulp.task('default', function () {
    var tsResult = tsProject.src().pipe(ts(tsProject));

    return tsResult.js.pipe(gulp.dest('dist'));
});

此配置将输出一个只有 cmets 的空文件。

this question中提到的另一种方法：

gulp.task('ts', function () {
    gulp.src('./src/ts/**/*.ts')
        .pipe(ts({
            noImplicitAny: true,
            out: 'output.js'
        }))
        .pipe(gulp.dest('./tmp/ts'));
});

gulp.task('default', ['ts'], function() {
    gulp.src(['./tmp/ts/output.js'])
        .pipe(sourcemaps.init())
        .pipe(uglify())
        .pipe(sourcemaps.write('/'))
        .pipe(gulp.dest('./dist/'));
});

但这带来了两个问题：1. 即使我只指向./src/ts 中的.ts 文件，打字稿编译器开始从./node_modules 中的.ts 中喷出错误。 2. 还是没能把所有东西串联起来。

我在这里很茫然。谁能帮我设置这个构建脚本？我很惊讶在任何地方都找不到类似的工作演示。

解决方案：

我已经根据this answer 中的解决方案配置了 gulp 环境，并删除了不在 typescript 模块内的类/对象的“export”语句。

Answer 1

如果有帮助，这里有一个 Angular Typescript Gulp Tutorial，它具有连接应用程序和供应商/节点文件的基本 TypeScript、Angular、Gulp 等设置。有demo code on github.

/* File: gulpfile.js */

// grab our gulp packages
var gulp  = require('gulp');
// Include plugins
var plugins = require("gulp-load-plugins")({
    pattern: ['gulp-*', 'gulp.*', 'main-bower-files', 'del'],
    replaceString: /\bgulp[\-.]/
});

var browserSync = require('browser-sync').create();
var reload      = browserSync.reload;


// create a default task to build the app
gulp.task('default', ['jade', 'typescript', 'bowerjs', 'bowercss', 'appcss'], function() {
  return plugins.util.log('App is built!')
});

在我的示例中，我们使用 Jade 转 HTML：

// Jade to HTML
gulp.task('jade', function() {
    return gulp.src('src/**/*.jade')
        .pipe(plugins.jade()) // pip to jade plugin
        .pipe(gulp.dest('dist')) // tell gulp our output folder
        .pipe(reload({stream: true}))
        ;
});

对于 TypeScript，我们编译成一个单独的 app.js 文件：

// TYPESCRIPT to JavaScript
gulp.task('typescript', function () {
    return gulp.src('src/**/*.ts')
        .pipe(plugins.typescript({
            noImplicitAny: true,
            out: 'app.js'
        }))
        .pipe(gulp.dest('dist/js/'))
    .pipe(reload({stream: true}))
    ;
});

对于 bower，我们将 vendor.js 中的所有 js 文件和 vendor.css 中的 CSS 合并：

// BOWER
gulp.task('bowerjs', function() {

    gulp.src(plugins.mainBowerFiles())
        .pipe(plugins.filter('**/*.js'))
    .pipe(plugins.debug())
        .pipe(plugins.concat('vendor.js'))
        .pipe(plugins.uglify())
        .pipe(gulp.dest('dist/js'));

});

gulp.task('bowercss', function() {
    gulp.src(plugins.mainBowerFiles())
        .pipe(plugins.filter('**/*.css'))
    .pipe(plugins.debug())
        .pipe(plugins.concat('vendor.css'))
        .pipe(gulp.dest('dist/css'));

});

自定义 CSS：

// APP css
gulp.task('appcss', function () {
    return gulp.src('src/css/**/*.css')
        .pipe(gulp.dest('dist/css/'))
        .pipe(reload({
            stream: true
        }));
});

// CLEAN
gulp.task('clean', function(done) {
    var delconfig = [].concat(
        'dist',
        '.tmp/js'
    );

    // force: clean files outside current directory
    plugins.del(delconfig, {
        force: true
    }, done);
});

这是在发生更改时重新加载浏览器的内容：

// Watch scss AND html files, doing different things with each.
gulp.task('serve', ['default'], function () {

    // Serve files from the root of this project
    browserSync.init({
        server: {
            baseDir: "./dist/"
        }
    });

    gulp.watch("src/**/*.jade", ['jade']).on("change", reload);
    gulp.watch("src/**/*.ts", ['typescript']).on("change", reload);
        gulp.watch("src/**/*.css", ['appcss']).on("change", reload);
});

我的 tsconfig.json 看起来像这样...我把从文本编辑器 (Atom) 自动编译的 JS 文件放到 .tmp/js/atom ... 有些人把 .js 放在与.ts 但我觉得它令人困惑......文件越少对我来说越好：

{
  "compilerOptions": {
    "target": "ES5",
    "module": "commonjs",
    "outDir": ".tmp/js/atom"
  },
  "exclude": [
    "node_modules",
    "typings"
  ]
}