Home » Javascript » Decreasing google closure run time using gulp

Decreasing google closure run time using gulp

Posted by: admin November 1, 2017 Leave a comment

Questions:

I am trying to find an alternative for plovr while development, because plovr is a little bit far behind and upgrading google closure every time is becoming troublesome there.

So I considered using gulp. I set up a gulp webserver using gulp connect and on fallback, it triggers the google closure compile, then it waits until the file is generated and it will then serve it to the client. The problem that I am facing is that the compile time is much bigger than plovr ~40s vs ~20s. For a frontend developer that will be a long time to wait for the page to load after a small change. Any idea what can be done to optimize the compile time of the closure compiler. Here is my gulpfile.js to give you an idea about my setup.

var gulp = require('gulp'),
    closureCompiler = require('google-closure-compiler').gulp({
        extraArguments: ['-Xms2048m']
    }),
    fs = require('fs-extra'),
    grepit = require('grepit'),
    connect = require('gulp-connect'),
    sleep = require('system-sleep'),
    outputPath = './target/js',
    pathToJavascriptCode = './project/',
    compilationLevel = 'ADVANCED',
    entryPoint = undefined;

gulp.task('js-clean', function() {
    fs.removeSync(outputPath);
});

gulp.task('js-compile', function() {
    var outputFileName = entryPoint + '.' + compilationLevel.toLowerCase() + '.js.compiled';
    return gulp.src([
    pathToJavascriptCode + '/**/*.js',
    './node_modules/google-closure-library/closure/goog/**/*.js',
    '!./node_modules/google-closure-library/closure/goog/**/*_test.js'],
    {base: './'})
      .pipe(closureCompiler({
          closure_entry_point: entryPoint,
          externs: [
              './public/javascripts/libs/jquery-1.7-externs.js'],
          compilation_level: compilationLevel,
          warning_level: 'VERBOSE',
          js_output_file: './' + outputFileName,
          manage_closure_dependencies: true,
          language_in: 'ECMASCRIPT6',
          language_out: 'ECMASCRIPT5'
        }))
      .pipe(gulp.dest(outputPath))
      .pipe(connect.reload());
});

gulp.task('webserver', function () {
    connect.server({
        root: ['./target/js/'],
        port: 8080,
        livereload: true,
        middleware: function() {
            return [function(req, res, next) {
                res.setHeader('Access-Control-Allow-Origin', '*');
                next();
            }];
        },
        fallback: function(req, res) {
            var requestedFileName = req.url.replace('/', '');
            var requestedFileNameParts = requestedFileName.split('.');

            compilationLevel = requestedFileNameParts[3] === 'simple' ? 'SIMPLE' : 'ADVANCED';
            entryPoint = requestedFileNameParts[2] !== 'all' ? requestedFileNameParts.splice(0, 3).join('.') : undefined;
            gulp.start('js-compile');

            var path = './target/js' + req.url;
            while(fs.existsSync(path) !== true) {
                console.log(path + ' does not exist yet, sleeping for 1 second');
                sleep(1000)
            }
            return path;
        }
    })
});


gulp.task('watch', function() {
    gulp.watch('./project/pauljs/**/*.js', ['js-clean']);
});

gulp.task('default', ['js-clean', 'webserver', 'watch']);

After some research I guess the problem is the slow startup time of the jvm, I found this https://www.npmjs.com/package/closure-gun which uses nailgun to run google closure compiler, but I am not sure how can I integrate this with my current setup, any pointers will be appreciated 🙂

Answers: