I'm working on a project using Typescript currently I'm facing a problem piling Typescript and then concatenate the result using Gulp.

var gulp = require('gulp');
var ts = require('gulp-typescript');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');

gulp.task('default', function () {
    gulp.src('vendor/**/*.js')
        // I want to add ts files then bile and concat
        .gulp.src('src/**/*.ts')
        .pipe(sourcemaps.init())
        .pipe(ts({
            noImplicitAny: true,
            out: 'output.js'
        }))
        .pipe(concat('all.js'))
        .pipe(uglify());
        .pipe(sourcemaps.write('/'))
        .pipe(gulp.dest('./dist/'));
});

In words what I need to do is:

1. Get the external JavaScript libraries.
2. Get Typescripts.
3. Compile Typescripts with source map.
4. Concat the result to the previously added JavaScript.
5. Uglify them.
6. Create the sorce map.
7. Save the result into some folder.

Update

Or just a way to make sure that the TypeScript is piled before proceeding with concatenating the result with JavaScript.

I'm working on a project using Typescript currently I'm facing a problem piling Typescript and then concatenate the result using Gulp.

var gulp = require('gulp');
var ts = require('gulp-typescript');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');

gulp.task('default', function () {
    gulp.src('vendor/**/*.js')
        // I want to add ts files then bile and concat
        .gulp.src('src/**/*.ts')
        .pipe(sourcemaps.init())
        .pipe(ts({
            noImplicitAny: true,
            out: 'output.js'
        }))
        .pipe(concat('all.js'))
        .pipe(uglify());
        .pipe(sourcemaps.write('/'))
        .pipe(gulp.dest('./dist/'));
});

In words what I need to do is:

1. Get the external JavaScript libraries.
2. Get Typescripts.
3. Compile Typescripts with source map.
4. Concat the result to the previously added JavaScript.
5. Uglify them.
6. Create the sorce map.
7. Save the result into some folder.

Update

Or just a way to make sure that the TypeScript is piled before proceeding with concatenating the result with JavaScript.

• javascript
• typescript
• gulp
• tsc
• gulp-typescript

• What is your problem? Is it the output.js? You could create 2 tasks, one requiring the other. – cl3m Commented Mar 22, 2016 at 16:35
• 1 Yes but I need to make sure that the TypeScript is piled before proceeding with concatenating the result with JavaScript – Mustafa Dwaikat Commented Mar 22, 2016 at 16:44

2 Answers 2

If you require the event-stream package from npm, then you can do this:

var merge = require('event-stream').merge;

gulp.task('default', function() {
    var js = gulp.src('vendor/**/*.js');

    var ts = gulp.src('src/**/*.ts')
        .pipe(ts({
            noImplicitAny: true,
            out: 'output.js'
        }));

    return merge(js, ts)
        .pipe(concat('all.js'))
        .pipe(uglify())
        .pipe(gulp.dest('./dist/'));
});

I don't know off the top of my head how to source maps work but I'm sure it's easy to figure out.

I'm more a coffeescript guy, but what about splitting into two separate tasks (solution below not tested, and there is a temporary output to the ./tmp folder):

gulp.task('ts', function () {
    gulp.src('src/**/*.ts')
        .pipe(ts({
            noImplicitAny: true,
            out: 'output.js'
        }))
        .pipe(gulp.dest('./tmp/ts'));
});

gulp.task('default', ['ts'], function() {
    gulp.src(['vendor/**/*.js', './tmp/ts/output.js'])
        .pipe(sourcemaps.init())
        .pipe(uglify())
        .pipe(sourcemaps.write('/'))
        .pipe(gulp.dest('./dist/'));
});

Usage (in your terminal):

gulp default

Gulp will first run the ts task, then, once pleted, it will run the default task