Gulp concat가 제대로 작동하지 않습니다.

Question

Angular 2 응용 프로그램을 Gulp과 함께 단일 최소화 된 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; 
} 

-

사실 그것은과 함께, 사실

Answer 1

CONCAT 않고 같은 파일을 작성 옵션을 사용하면 TypeScript 컴파일러는 모든 파일을 단일 파일로 수집합니다. 따라서 컴파일 결과를 연결할 필요가 없습니다 ...

왜 gulp-concat 플러그인을 사용 하시겠습니까?

Answer 2

꿀꺽 묵살은 비동기 함수이므로 한 덩어리에서 입력 코드를 컴파일 한 후 다음 블록에서 이전 묵음 호출 (tsResult.js)의 반환 값을 사용하려고 시도하면 ulpt는 존재하지 않습니다.

대신 두 가지 작업을 차례로 실행해야합니다.

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