Gulp concat 无法正常工作

Question

我尝试使用Gulp 将我的Angular 2 应用程序构建为单个最小化的js 文件，但gulp-concnat 插件似乎无法正常工作。它只是用几行配置代码构建了以下文件。

{"version":3,"sources":["service/rxjs-operators.ts"],"names":[],"mappings":";;;;;;;;;AAAA,uEAAuE","file":"app.js","sourcesContent":["// import 'rxjs/Rx'; // adds ALL RxJS statics & operators to Observable\r\n\r\n// See node_module/rxjs/Rxjs.js\r\n// Import just the rxjs statics and operators we need for THIS app.\r\n\r\n// Statics\r\nimport 'rxjs/add/observable/throw';\r\n\r\n// Operators\r\nimport 'rxjs/add/operator/catch';\r\nimport 'rxjs/add/operator/debounceTime';\r\nimport 'rxjs/add/operator/distinctUntilChanged';\r\nimport 'rxjs/add/operator/map';\r\nimport 'rxjs/add/operator/switchMap';\r\nimport 'rxjs/add/operator/toPromise';"],"sourceRoot":"/source/"}
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
// import 'rxjs/Rx'; // adds ALL RxJS statics & operators to Observable

//# sourceMappingURL=app.js.map

这是我的gulpfile

var gulp = require('gulp');
var tsc = require('gulp-typescript');
var tslint = require('gulp-tslint');
var sourcemaps = require('gulp-sourcemaps');
const uglify = require('gulp-uglify');
const concat = require('gulp-concat');
var htmlreplace = require('gulp-html-replace');
var addsrc = require('gulp-add-src')
var config = require('./gulp.config')();

gulp.task('ts-lint', function() {
    return gulp
        .src(config.allTs)
        .pipe(tslint())
        .pipe(tslint.report('prose'), {
            emitError: false
        })
});

gulp.task('bundle', function() {
    var sourceTsFiles = [
        config.allTs,
        config.typings
    ];

    var tsProject = tsc.createProject('tsconfig.json', {
      typescript: require('typescript'),
      outFile: 'app.js'
    });

    var tsResult = gulp
        .src(sourceTsFiles)
        .pipe(sourcemaps.init())
        .pipe(tsc(tsProject));

    return tsResult.js
        .pipe(sourcemaps.write('.'))
        pipe(concat('app.min.js'))
        //.pipe(uglify())
        .pipe(gulp.dest(config.tsOutputPath));
});

--

module.exports = function() {

    var config = {
        allTs: './app/**/*.ts',
        typings: './typings/**/*.d.ts',
        tsOutputPath: './dist'
    }
    return config;
}

--

实际上它构建相同的文件没有 concat

Answer 1

事实上，使用outFile 选项，TypeScript 编译器会将所有文件收集到一个文件中。所以编译的输出就不用concat了……

为什么要在这里使用 gulp-concat 插件？

Answer 2

Gulp 是一个异步函数，所以当你在一个 gulp 中编译你的 typescript 代码，然后在下一个块中尝试使用上一个 gulp 调用 (tsResult.js) 的返回值时，它不会存在。

相反，您应该让两个任务一个接一个地运行。

var tsResult

gulp.task('compile', function() {
  var sourceTsFiles = [
    config.allTs,
    config.typings
  ];

  var tsProject = tsc.createProject('tsconfig.json', {
    typescript: require('typescript'),
    outFile: 'app.js'
  });

  tsResult = gulp
    .src(sourceTsFiles)
    .pipe(sourcemaps.init())
    .pipe(tsc(tsProject));

  return tsResult;
});

gulp.task('bundle', ['compile'], function() {

  return tsResult.js
    .pipe(sourcemaps.write('.'))
    .pipe(concat('app.min.js'))
    //.pipe(uglify())
    .pipe(gulp.dest(config.tsOutputPath));
});