Managing JS assets

Question

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']);

Answer 1

I'm not sure if this is the best place for this question, your gulp tasks look fine to me, it's more of a development issue I think. Regardless, I use a similar setup to you except that I use require.js to load the modules whilst in development.

This has the benefit of greater code re-use as you can separate your JavaScript into manageable small partials, and, there's no need to produce a minified version of your scripts constantly on file change. The difference becomes pretty apparent once you are working with a lot of code, for me now my build step can take anywhere up to 12 seconds, which would be a headache for development; now I only have to run this when I would like to deploy the application into production. Using the r.js optimiser it will trace your dependency graph and concat the files in order. A sample gulp task could look like this:

var requirejs = require('requirejs');

gulp.task('build', function(cb) {
    requirejs.optimize({
        name: 'main',
        baseUrl: 'lib',
        mainConfigFile: 'lib/config.js',
        out: 'web/js/main.js',
        optimizeAllPluginResources: true,
    }, function() {
        gutil.log('[' + gutil.colors.green('require.js') + '] Build complete.');
        cb();
    }, cb);
});

I also stumbled across amdclean which can strip away all of the require.js loader code, should you not need functionality provided by the async plugin. Would definitely recommend this.

The alternative to require.js is browserify which does the whole module loading deal, except it does require that build step whenever you save your files. For this reason it may be preferable to use require.js instead, especially if you anticipate working with a lot of JavaScript for your project.

Good luck!