CODEWITHSUNDEEP
gulpgulp-concatgulp-uglify
Ryan Langton
Ryan Langton

Reputation: 6160

Gulp bundle then minify

I'm creating 3 minified bundles for my application. I have 2 tasks to do this, minify, and bundle. Minify has a dependency on bundle. If I run minify, both tasks run with no errors. The bundles are created, but the minified files are not. If I remove the dependency on bundle, I can then run minify by itself and the minified files are created successfully. This leads me to believe maybe the files are in use when the minify task triggers (because bundle hasn't finished?). How do I cause it to wait until the files are fully ready? Can I pass the stream? Or maybe combine these into a single task? The reason they are not currently a single task is because they output 2 files per bundle (an unminified and a minified bundle).

var outFolder = __dirname + '\\Scripts\\dist';
var appBundles = [
    { scripts: ['Scripts/Common/**/*.js'], output: 'eStore.common.js' },
    { scripts: ['Scripts/Checkout/**/*.js'], output: 'eStore.checkout.js' },
    { scripts: ['Scripts/ProductDetail/**/*.js'], output: 'eStore.product.js' }
];

gulp.task('bundle', bundle);
gulp.task('minify', ['bundle'], minify);  // this one doesn't work
gulp.task('minifyOnly', minify);          // this one works

function bundle() {
    appBundles.forEach(function (appBundle) {
        gulp.src(appBundle.scripts)
            .pipe(concat(appBundle.output))
            .pipe(sourcemaps.init())
            .pipe(sourcemaps.write(outFolder + '\\maps'))
            .pipe(gulp.dest(outFolder))
            .on('error', errorHandler);
    });
}

function minify() {
    appBundles.forEach(function(appBundle) {
        var bundleSrc = outFolder + '\\' + appBundle.output;
        gulp.src(bundleSrc)
            .pipe(rename({ extname: '.min.js' }))
            .pipe(uglify())
            .pipe(gulp.dest(outFolder))
            .on('error', errorHandler);
    });
}

Upvotes: 7

Views: 5500

Answers (1)

Ryan Langton
Ryan Langton

Reputation: 6160

Have the minify task use the same source files that the bundle task uses. 'concat' will be used in both tasks. This way minify doesn't have a dependency on the output from the bundle task.

function minify() {
    appBundles.forEach(function (appBundle) {
        console.log('Creating minified bundle for: ' + appBundle.output);
        gulp.src(appBundle.scripts)
            .pipe(concat(appBundle.output))
            .pipe(rename({ extname: '.min.js' }))
            .pipe(uglify())
            .pipe(gulp.dest(outFolder))
            .on('error', errorHandler);
    });
}

function bundle() {
    appBundles.forEach(function (appBundle) {
        console.log('Creating bundle and sourcemaps: ' + appBundle.output);
        gulp.src(appBundle.scripts)
            .pipe(concat(appBundle.output))
            .pipe(sourcemaps.init())
            .pipe(sourcemaps.write(outFolder + '\\maps'))
            .pipe(gulp.dest(outFolder))
            .on('error', errorHandler);
    });
}

Upvotes: 3

Related Questions