It’s been over a year since my last semi-rant about gulp.  I’ve continued to use gulp as my client-side build tool on countless projects.  I’ve learned a ton.  I finally feel like I’m ready to create a reusable, all-purpose gulp file.  Here’s what I have so far

[more]

Like I said, I’ve been using gulp heavily on lots of new greenfield (and even some brownfield) projects over the last year.  Each project’s gulp file has been better than the one that came before it.  I finally feel like I’m at the point where I can create a reusable gulp file for use across all my apps, both mobile (Cordova) and web, regardless of whether they are ASP.NET or pure client-side SPAs. 

It isn’t quite ready to be part of my Heroic Framework of components, but it’s getting close.   You can check out the POC repo and project here: heroic-gulp-poc

What all can it do? 

Let’s see!

Compile SCSS to CSS, autoprefix, minify, concat, etc, with working sourcemaps? 

gulp css

Compile ES6 to JS, apply AngularJS annotations, uglify it, concat it, with working sourcemaps?

gulp js

Compile AngularJS templates into the template cache? 

gulp htmlTemplates

Build everything?

gulp build

Watch files for changes and rebuild?

gulp watch

Serve files using Browsersync? 

gulp browsersync

Build everything, serve files using Browsersync, and watch for changes (ie: I’m actually doing work!)?

gulp buildAndServe watch

Apply cache busting?

gulp cacheBust

All of this is built on top of gulp 4.   Coming from gulp 3, this was a huge improvement.  My gulp 3 watch tasks were always flakey, but gulp 4 seems to be rock solid in this department.

Things I like

  • Tasks are lean and self-contained. The SASS and JS tasks don’t have to worry about whether or not Browsersync is running. Neither does watch.
  • It should work well for the way I build both web and mobile (Cordova) apps. There are a few tasks that don’t apply for mobile, but oh well.
  • The config is mostly the same: you have a config object for each task, and things are consistent between them whenever possible.

Things I don’t like

This is still a POC, and I’d like to make some further improvements:

  • I don’t like that it’s 3 files. Maybe I shouldn’t have made “gulpHero” as a utility. It does keep the tasks nice and clean though.
  • I don’t like that I have to actually ship a gulpfile.js. I’d like to somehow have a library of tasks that you could then import/export in your own gulpfile. I played around with this, but didn’t like how it looked.

So, what do you think?