Talking about CodeKit and the benefits it offers for front-end developers has also come just after a post and the benefits that something like Gulp offers, as well.

A post on the difference between the two, why you may want one over the other, and the advantages or disadvantages of either can be its post.

But for this, I’d like to take the starter packages I wrote about regarding Gulp and give a simple example of a starter Gulp file and how to use it in your WordPress projects.

Getting Started with Gulp

First, I’m a fan of Homebrew, so when it comes to managing packages that are not part of the Mac App Store, I use it. This makes installing packages, updating them, and uninstalling them much easier.

Getting Started with Gulp: Homebrew

If you’ve not read my guide on Homebrew, please do so as the remainder of this post assumes you have it installed.

1. Install Gulp

If you have Homebrew installed, make sure that everything looks good and is up to date, I have an entire guide for setting up Gulp on your local machine.

Getting Started with Gulp: Gulp

So if you don’t already have that setup, check out this post for how to do it.

2. Write Your Gulp Configuration File, Part 1

To initialize a Gulp configuration file, enter the following command in the root directory of your project in your terminal:

Easy, isn’t it?

This will create a blank gulpfile.js in your project’s root directory. Next, it’s time to edit the file.

For this post, I’m going to be using four packages that I’ve previously outlined:

Each of these is tasks responsible for transpiling Sass, optimizing images, and minifying JavaScript.

Tasks that you want to run from the command line should not have spaces in them.

To set up the basic tasks so that you can run them from the command-line, you’ll need to do the following:

Sass

JavaScript

Images

Running Them Individually

Running these tasks individually requires that you type the following into the console each time you want to, say, transpile your Sass files and minify your JavaScript files:

But this gets old fast. Further, it’s less efficient especially when you can set up a watch to automatically run your tasks whenever you save a file.

2. Write Your Gulp Configuration File, Part 2

Setting up a watch is probably the best thing you can do when it comes to saving time with Gulp.

Watch files and do something when a file changes. This always returns an EventEmitter that emits change events.

Setting up a watch is easy. It’s much like a task (in fact, it requires a task) but it also has special arguments. To add a watch task that will handle Sass, JavaScript, and images, set up the following in your gulpfile.js:

Then just run the task:

From here, everytime you save a Sass file, a JavaScript file, or make a change to an image, then the task will fire automatically doing the work of the defined task. Note that this will run perpetually in its thread, so you’ll need to open a new terminal tab or window if you need to do any additional work.

A Note About Versions

In earlier versions of Gulp, the second argument for the watch function would accept an array; however, the latest version requires an actual function (which you can see above in that I’ve declared series).

The short of it is that Gulp 4 allows for sequential execution, which is done via series, and parallel execution (which can use the parallel function). Those are beyond the scope of this post as this is purely meant to help get you started.

Once done, you should have a lot more automation in your build process.

Category:
Articles
Tags: