1
\$\begingroup\$

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']);
\$\endgroup\$
1
  • \$\begingroup\$ Welcome to Code Review! It's usually a good idea to include a bit of plain English description/context alongside your code, feel free to edit your question; also try to come up with a title that shortly describes what the code is doing. \$\endgroup\$ Commented Sep 21, 2014 at 12:29

1 Answer 1

1
\$\begingroup\$

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!

\$\endgroup\$
3
  • \$\begingroup\$ Thanks for the help. I have found a solution in gulp-if. The condition being if only my app/assets/javascript/frontend.js has changed then minify and add to public/js/frontend.js rather than concatenating all three on every save. \$\endgroup\$ Commented Sep 22, 2014 at 12:39
  • \$\begingroup\$ Thanks for the info on require.js and browserify, I will take a look at those. \$\endgroup\$ Commented Sep 22, 2014 at 12:46
  • \$\begingroup\$ Ah yes, hadn't thought of gulp-if. You're welcome! :-) \$\endgroup\$
    – Ben
    Commented Sep 22, 2014 at 13:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.