The scripts task takes ~5 seconds. Because I need to use es6 modules, I also added es6-module-transpiler to the task which adds another ~5 seconds.
10 seconds is too slow for a dev environment imo.
So I thought maybe the task could be simplified by not compiling, minifying etc all the vendor stuff. Removing the libs from bower_components reduces the build time to ~200 ms.
Could really use some comments or help here / tips on how to fix the gulp task.
I have incremental builds in the pipe. That will drastically speed up compiles without sacrificing dev/prod parity.
In the meantime: you can hide uglification behind a flag with gulpif. For instance add a ‘–fast’ flag. Look at how the --production flag is implemented.
So looking at the Makefile I take it your project uses Browserify (fixes ES6 modules in my case) and watchify which handles incremental builds.
Looks pretty sweet. Although at this point I might just end up writing a npm build script instead. Just doesn’t feel right importing browserify into gulp imo, and I’d rather use npm than make.
Yes would very much like to explain this. Explaining how this works will bring us all onto the same page as to how I want the incremental builds to work. I’ll try to get to this today.
To give an example of austin’s suggestion, try this:
Add a variable to the enabled object:
// CLI options
var enabled = {
// Enable static asset revisioning when --production
rev: argv.production,
// Disable source maps when --production
maps: !argv.production,
// Fail styles task on error when --production
failStyleTask: argv.production,
uglify: !argv.fast
};
In this case I used “uglify”.
use an $.if check to not uglify if the --fast flag is set
change the jsTasks pipe:
I did get babel to transpile, but because it doesn’t include a loader in the browser (“require is not defined”) I had to use something else. So I found gulp-es6-module-transpiler which does work.
Ah. Did you have to name your es6 files with an extension other than .js? I’m trying to figure out how to get only my app-specific es6 modules to run through that (and not third-party libraries like jquery).
I would recommend using npm + browserify + babel (as a browserify transform) for your app scripts in a separate task that is a dependency of the main JS task.
I followed the link you provided (thanks for that). A more complete example of integrating this with my sage gulpfile would be helpful if it’s not too much trouble?