My main concern in this script is the 'js' task. Each time I change 'frontend.js' I concat and minify 'jquery.js', 'bootstrap.js', and frontend.js. I'm only really editing one file, yet on every save I am concatenating all three and minifying. Is there a better way to to this?
// Load plugins
var gulp = require('gulp');
var sass = require('gulp-ruby-sass');
var autoprefix = require('gulp-autoprefixer');
var notify = require('gulp-notify');
var gutil = require('gulp-util');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var plumber = require('gulp-plumber');
// Sass dir
var sassDir = 'app/assets/stylesheets';
// JS dir
var jsDir = 'app/assets/javascript';
// Complied sass dir
var targetCSSDir = 'public/css';
// Complied JS dir
var targetJSDir = 'public/js';
// highlight error messages on error
var onError = function (err) {
gutil.log(gutil.colors.red(err));
};
/**
* Compile Sass, autoprefix CSS3,
*
*/
gulp.task('css', function() {
return gulp.src(sassDir + '/frontend.scss')
.pipe(plumber({
errorHandler: onError
}))
.pipe(sass({ style: 'compressed' }))
.pipe(autoprefix('last 10 version'))
.pipe(gulp.dest(targetCSSDir))
.pipe(notify('Sass compiled, CSS compressed!'))
});
/**
* Concat & minify jQuery, Bootstrap and frontend.js
* and save to target JS directory
*/
gulp.task('js', function() {
return gulp.src(['app/assets/bower/jquery/dist/jquery.js', 'app/assets/bower/bootstrap-sass-official/assets/javascripts/bootstrap.js', jsDir + '/frontend.js'])
.pipe(plumber({
errorHandler: onError
}))
.pipe(concat('frontend.min.js'))
.pipe(uglify({ mangle: false }))
.pipe(gulp.dest(targetJSDir))
.pipe(notify('JS concatenated and minified!'))
});
/**
* Watch Sass and JS for changes
*/
gulp.task('watch', function() {
gulp.watch(sassDir + '/**/*.scss', ['css']);
gulp.watch(jsDir + '/**/*.js', ['js']);
});
/**
* Tasks to run on gulp trigger
*/
gulp.task('default', ['css', 'js', 'watch']);