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);
});
}
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.
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.
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.
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);
});
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With