如果这有帮助，这里有一个Angular Typescript Gulp Tutorial，它有一个基本的打字、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 to 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}))
        ;
});

对于TypeScrip，我们编译成一个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);
});

我的tsfig.json是这样的.我将从文本编辑器(Atom)自动编译的JS文件放入.tmp/js/tom中……有些人将.js放在与.ts相同的目录中，但我觉得这很令人困惑……文件越少对我越好：

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