Gulp concat doesn't work properly

Question

I try to build my Angular 2 application to single minimized js-file with Gulp , but the gulp-concnat plugin doesn't seem to work properly. It just build the following file with few lines of some configuration code.

{"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

Here is my 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;
}

--

Actually it build the same file without concat

Answer 1

In fact, with the outFile option, the TypeScript compiler will gather all the files into a single one. So there is no need to concat the output of the compilation...

Why do you want to use the gulp-concat plugin here?

Answer 2

Gulp is an asynchronous function, so when you compile your typescript code in one gulp, and then on the next block try to use the return value from the previous gulp call ( tsResult.js ), it won't be there.

Instead, you should make two tasks that run one after the other.

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