javascript - Using Gulp how to first compile Typescript then concatenate the result and uglify it? - Stack Overflow

admin管理员组

文章数量:1344300

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

Share Improve this question Follow edited Mar 22, 2016 at 16:46 Mustafa Dwaikat asked Mar 22, 2016 at 16:31 Mustafa DwaikatMustafa Dwaikat 3,7021010 gold badges2929 silver badges4141 bronze badges 2

• 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

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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

本文标签：