CODEWITHSUNDEEP
javascripttypescriptgulptscgulp-typescript
Mustafa Dwaikat
Mustafa Dwaikat

Reputation: 3692

Using Gulp how to first compile Typescript then concatenate the result and uglify it?

I'm working on a project using Typescript currently I'm facing a problem compiling 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 combile 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 compiled before proceeding with concatenating the result with JavaScript.

Upvotes: 3

Views: 10695

Answers (2)

cl3m
cl3m

Reputation: 2801

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 completed, it will run the default task

Upvotes: 4

Mike Jerred
Mike Jerred

Reputation: 10515

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.

Upvotes: 5

Related Questions