I have a gulp file that I just wrote and I'm new at this. It's working but I have more tasks than I think I need.
Can anyone help me string the javascript tasks together as one task?
I need four separate js files all uglified when I'm done.
relevant code snippet from gulpfile.js:
var gulp = require('gulp')
uglify = require('gulp-uglify'),
rename = require('gulp-rename'),
concat = require('gulp-concat'),
notify = require('gulp-notify'),
cache = require('gulp-cache'),
del = require('del');
gulp.task('clean', function(cb) {
del(['css/*', 'js/min/*'], cb)
});
gulp.task('featuretest', function() {
return gulp.src('js/feature-test.js')
.pipe(rename({suffix: '.min'}))
.pipe(uglify())
.pipe(gulp.dest('js/min'))
});
// This file: '/js/excanvas.min.js' is only loaded via lte IE8 conditional statement
gulp.task('excanvas', function() {
return gulp.src('js/polyfills/excanvas.js')
.pipe(rename({suffix: '.min'}))
.pipe(uglify())
.pipe(gulp.dest('js/min'))
});
// This file: '/js/charts.min.js' is only used on very few pages
gulp.task('charts', function() {
return gulp.src(['js/highcharts-4.0.1.js', 'js/usfa-theme.js'])
.pipe(concat('charts.js'))
.pipe(rename({suffix: '.min'}))
.pipe(uglify())
.pipe(gulp.dest('js/min'))
});
// This file: '/js/main.min.js' is a concat of 'libs/jquery', a few polyfills (except excanvas.js and the highcharts)
gulp.task('scripts', function() {
return gulp.src(['js/libs/*.js', 'js/plugins/*.js', 'js/polyfills/*.js', '!js/excanvas.js', '!js/highcharts-4.0.1.js', 'js/custom.js'])
.pipe(concat('main.js'))
.pipe(rename({suffix: '.min'}))
.pipe(uglify())
.pipe(gulp.dest('js/min'))
.pipe(notify({ message: 'Scripts task complete' }));
});
gulp.task('watch', function() {
// Watch .js files
gulp.watch('js/**/*.js', ['featuretest', 'excanvas', 'charts', 'scripts']);
});
gulp.task('default', ['clean'], function() {
gulp.start('featuretest', 'excanvas', 'charts', 'scripts');
});
What I was trying to do:
var gulp = require('gulp')
uglify = require('gulp-uglify'),
rename = require('gulp-rename'),
concat = require('gulp-concat'),
notify = require('gulp-notify'),
cache = require('gulp-cache'),
del = require('del');
gulp.task('clean', function(cb) {
del(['css/*', 'js/min/*'], cb)
});
gulp.task('scripts', function() {
// This file: '/js/feature-test.js' is loaded in the doc <head>
return gulp.src('js/feature-test.js')
.pipe(rename({suffix: '.min'}))
.pipe(uglify())
.pipe(gulp.dest('js/min'))
// This file: '/js/excanvas.min.js' is only loaded via lte IE8 conditional statement at the end of the doc
return gulp.src('js/polyfills/excanvas.js')
.pipe(rename({suffix: '.min'}))
.pipe(uglify())
.pipe(gulp.dest('js/min'))
// This file: '/js/charts.min.js' is only used on very few pages and is loaded only when needed at the end of the doc
return gulp.src(['js/highcharts-4.0.1.js', 'js/usfa-theme.js'])
.pipe(concat('charts.js'))
.pipe(rename({suffix: '.min'}))
.pipe(uglify())
.pipe(gulp.dest('js/min'))
// This file: '/js/main.min.js' is a concat of 'libs/jquery', a few polyfills (except excanvas.js and the high charts), it is loaded at the end of every doc
return gulp.src(['js/libs/*.js', 'js/plugins/*.js', 'js/polyfills/*.js', '!js/excanvas.js', '!js/highcharts-4.0.1.js', 'js/custom.js'])
.pipe(concat('main.js'))
.pipe(rename({suffix: '.min'}))
.pipe(uglify())
.pipe(gulp.dest('js/min'))
.pipe(notify({ message: 'Scripts task complete' }));
});
gulp.task('watch', function() {
// Watch .js files
gulp.watch('js/**/*.js', ['scripts']);
});
gulp.task('default', ['clean'], function() {
gulp.start('scripts');
});
If you're asking the question how do I combine separate operations into a single task, you can combine streams with gulp-util.
var gulp = require('gulp')
uglify = require('gulp-uglify'),
util = require('gulp-util');
gulp.task('scripts', function() {
var featureTest = gulp.src('js/feature-test.js')...
var excanvas = gulp.src('js/polyfills/excanvas.js')...
var charts = gulp.src(['js/highcharts-4.0.1.js', 'js/usfa-theme.js'])...
var scripts = gulp.src(['js/libs/*.js', 'js/plugins/*.js', 'js/polyfills/*.js', '!js/excanvas.js', '!js/highcharts-4.0.1.js', 'js/custom.js'])...
// combine streams
return util.combine(featureTest, excanvas, charts, scripts);
});
This will give you a single task, but it's not any faster. If you're not forcing things to be sequential, gulp will be as fast as it's gonna be.