Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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);
    });
}
like image 562
Ryan Langton Avatar asked Sep 18 '15 16:09

Ryan Langton


People also ask

How do I minify JavaScript using gulp?

js, first declare the dependencies as shown in the following code. var gulp = require('gulp'); var concat = require('gulp-concat'); var uglify = require('gulp-uglify'); var minify = require('gulp-minify-css'); Next, you need to create tasks for optimizing CSS and JavaScript as shown in the following code. gulp.

How do you bundle with gulp?

We can accomplish this in a few steps: Create a new file that contains all the project specific configuration. Modify the gulpfile to include and use this new configuration file. Modify the gulp tasks to use these new variables instead of the hardcoded values.

What is gulp bundle for?

Gulp is a cross-platform, streaming task runner that lets developers automate many development tasks. At a high level, gulp reads files as streams and pipes the streams to different tasks. These tasks are code-based and use plugins. The tasks modify the files, building source files into production files.


1 Answers

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);
    });
}
like image 89
Ryan Langton Avatar answered Sep 20 '22 08:09

Ryan Langton