使用Gulp构建Angular的Typescript

时间：2016-07-05 22:26:44

标签： angularjs typescript gulp gulp-typescript

我尝试使用TypeScript和Gulp作为构建工具，根据Johnpapa's Angular Style Guide设置angularjs项目。我相信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);
使用简单的tsconfig.json配置

typescript。 （请注意，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监控.ts
    • 中新的或更新的./src/ts/**/*.ts个文件
  • 连接./src/ts/**/*.ts中的所有文件。这是角度正常工作所必需的。我尝试过使用requirejs或browserify的其他方法无法手动输入对这些文件的引用，无法找到其他.ts文件。
  • 使用tsconfig.json中的定义进行编译。这将考虑./src/typings/index.d.ts中的输入（对于外部模块，包括＆＃39; angular＆＃39;）。也是源图。
  • 可能是完成它的丑陋或丑化步骤。

我尝试了什么：

我已尝试按照typescriptlang handbook中的说明进行操作，但这会使用browserify并且无法使用角色。

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'));
});

此配置将输出仅包含注释的空文件。

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。即使我只指向.ts中的./src/ts文件，打字稿编译器也开始从./node_modules中的.ts引发错误。它仍然没有设法连接所有东西。

我在这里相当茫然。任何人都可以帮我设置这个构建脚本吗？我很惊讶我无法在任何地方找到类似的工作演示。

解决方案：

我已根据this answer中的解决方案配置了gulp环境，删除了导出＆＃39;不在typescript模块中的类/对象的语句。

1 个答案:

答案 0 :(得分：3)

如果有帮助，这里有一个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"
  ]
}
相关问题
最新问题