Fun With Gulp Part 3 – build it and they will come… unless it breaks…

So, I’m loving using Gulp. It’s ability to simplify and automate tedious tasks has really improved my workflow over the last couple of months and I’m insanely grateful to my past self for writing a handy guide on how to set up the basics for compiling and minifying sass files. You can read it right here if you’ve not already done so. One of the things I noticed recently, though, was the hefty footprint that the Node.js modules required by Gulp leaves in your environment. Case in point, I’m building a WordPress theme at the minute which is roughly 30Kb big. The Node.js dev environment, however, adds a not insignificant 33Mb to the footprint, however, and I shouldn’t really be dropping all of that into a production environment. So what’s next?

Well, it’s time to set up a Source/Distribution environment. Let’s consider the following folder structure:

- my-project
   - src
      - sass
      - css
      - js
      index.htm
   - dist
   gulpfile.js

So I’m sure this is all fairly standard for a lot of modern development standards but for an old hat like me who’s spent some time out of the loop it’s all new and exciting ground. Anyway, the src folder will contain all our working code, sass files and whatnot, while the dist folder will contain all the bits of our code that we want to deploy to the server. Let’s make an assumption that it’s everything in the src file except the sass folder, as we’ll be using our minified css on the server. How can we do that?

Well, the theory here is that we need to run the following process every time we want to build our project.

  • Empty the dist folder
  • Copy all the stuff we need from the src folder

All well and good and fairly straight forward. The gulp.src().gulp.dest(…) pipeline we’ve seen in previous examples will do this just fine, so we simply need another plugin to clear out the dist folder every time we run our build.

I want to take a step aside for a moment here.

What I used to delete the folder contents is the standard Node.js del module, detailed here. The first time I implemented it, this method didn’t work and I wasn’t really sure why. Moreover, it broke my Gulp installation in the project I was using rendering all my tasks inoperable. Not good.

What happened next was interesting and actually made me rewrite all of my Gulp tasks for the better. On repairing the local copy of Gulp in my project, I ended up installing Gulp v4. This meant that some of my existing tasks now wouldn’t work, specifically any using the run-sequence module, as Gulp 4 includes a sequencing tool as standard. You can read more about it here; where it left my tasks was pretty much the following change to my watch function:

gulp.task('watch', function(){
   gulp.watch('sass/*.scss', gulp.series('sass','minicss'));
});

As you can see, the watch task is now using gulp.series to first run sass, then minicss. This runs great and is, dare I say, a little more efficient than the old run-sequence method.

Anyway, back to the build task. Let’s get the del module installed like so:

npm install --save-dev gulp@next del

And use it to build the following tasks:

var del = require('del');
var sourcefiles = [
   'src/css/**/*',
   'src/js/**/*',
   'src/*.htm'
];

gulp.task('clean', function () {
    return del('dist/**/*');
});

gulp.task('makedist', function(){
    return gulp.src(sourcefiles,{ base: '.' })
        .pipe(gulp.dest('dist'))
});

gulp.task('build', gulp.series('clean', 'sass', 'minicss', 'makedist'), function(){});

Okay, what exactly is happening here? Firstly we’re instantiating our del module as you’ve seen in the past. After that we’re creating a sourcefiles array which contains informations on the locations and file types we’re going to be wanting to move to our dist folder. Those **/*’s are globs which will tell the task to match all files and folders in those locations.

Next up we’ve got the two doing tasks, clean and makedist. Clean uses del to clear out our dist folder, while makedist moves all our sourcefiles into the now empty location. The { base: ‘.’ } bit is important here as it tells Gulp to also recreate folder structures, rather than flattening everything (which was maddening before I stumbled on this solution!)

Finally we’ve got the build task which puts clean and makedist into sequence with sass and minicss to create our final code distributable, ready for pushing to the production environment. When you want to deploy, just run this and it’ll do everything you need.

And, as always, that’s that! Very straightforward but let’s you create nice clean bundles of files to push up to your server. If you’re feeling particularly adventurous you can even zip everything up using gulp-zip!

If this or any of my other Gulp articles has been helpful for you, please don’t hesitate to throw a comment down below or get in touch by other means – my Twitter handle is over on the right hand sidebar!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s