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編譯器會將所有文件收集到一個文件中。 因此，無需連接編譯的輸出...

為什么要在這里使用gulp-concat插件？

Answer 2

Gulp是一個異步函數，因此當您在一個gulp中編譯打字稿代碼，然后在下一個塊中嘗試使用上一個tsResult.js調用（ 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));
});