使用 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

根据 angular 风格指南，我为每个 angular 元素创建了一个单独的 .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 中的类型（对于包括 'angular' 的外部模块）。还有源地图。
可能需要一个 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'));
});

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

中提到的另一种方法：

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. 还是没能把所有东西串联起来。

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

解决方案：

我已经根据中的解决方案配置了 gulp 环境，并且 删除了类 / 对象的 'export' 声明不在打字稿模块中.

Answer 1

如果有帮助，这里是 Angular Typescript Gulp Tutorial that has a basic TypeScript, Angular, Gulp, etc. setup that concatenate the app and the vendor/nodes files. There is the 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和CSS中的所有js文件合并到vendor.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"
  ]
}

使用 Gulp 为 Angular 构建 Typescript

Building Typescript for Angular using Gulp

angularjs

typescript

gulp

gulp-typescript

我有：

我想要的：

我尝试了什么：

解决方案：