Software like Gulp and other utilities aren’t new. For those who haven’t used them before, it can be a little daunting to get started (but it really shouldn’t be).

A Few Gulp Packages for Starters

In comparison to tools like CodeKit (which I still like and recommend, depending on the project), they have a little more overhead regarding getting them set up, configured, and ready to go.

But once you’ve got it all set it up, it can be really useful with a distributed team regardless of operating system, and it can help it make your build process a bit more robust.

That’s not the purpose of the post, though. Instead, here’s a list of a few packages for starters.

Think of them this way: If you’re looking for ways to work with Sass, JavaScript, and image optimization, these are good libraries.

Gulp Packages for Starters

Before jumping into each of the following packages, I want to note that it’s important to read each of the linked pages. The documentation helps walk through options that the libraries offer that the code I’ve provided does not show.

That is, don’t simply copy and paste what I’ve provided. Use it as a starting point, but read through the documentation, as well. You may not find anything new.

Then again, you may find that there are options for tweaking your particular project.

1. Sass

You may opt to work with Less (I’m neither here nor there, really) but I tend to favor Sass. Thus, I use a library, gulp-sass, specifically for compiling Sass files into CSS.

Gulp Packages for Starters: gulp-sass

I normally have an assets directory and within that directory are some subdirectories for images, styles, and scripts.

Within the styles directory, I have two subdirectories:

  1. scss
  2. css

I keep all of my SCSS files in the respective directory, and then I use gulp-sass to output the compiled files into CSS.

From there, I enqueue the CSS files using the necessary WordPress API function.

2. JavaScript Minification

At this point, the benefits of minifying JavaScript files have been proven over and over again, so I’m not going to belabor the point further.

There are some packages that I’ve tried as it relates to working with JavaScript minification and gulp-uglify is the one that I find I enjoy using the most.

Gulp Packages for Starters: gulp-uglify

Recall from the previous section that I have my assets directory and within it I have my scripts subdirectory. That directory contains a single subdirectory of its own: dev.

I take the JavaScript files that are located in dev and output them into the root of the scripts directory.

From there, as I do above, I enqueue them using the same WordPress API function.

3. Image Optimization

Finally, one thing that can go a long way in making sure your page(s) load quickly are making sure your image assets are optimized.

Sure, there are some tools you can manually use to do this but if you find yourself adding, changing, or modifying image assets frequently and you want to automate the build process of optimization, then I recommend using gulp-imagemin.

[image]

There are some dependencies for this particular library so you’ll need to make sure they are included, as well. These include

  • imagemin-gifsicle,
  • imagemin-jpegtran,
  • imagemin-optipng,
  • imagemin-svgo.

These can be manually added to your configuration files, installed via the command line, or otherwise. Regardless, make sure you have them before trying to optimize your images.

Note from the code above (and what I’ve mentioned before) that my images directory is located in assets so when I run the task as mentioned above, it will optimize any of the supported image types in that location.

Package Files, Gulp Files, and All That?

If you’re new to Gulp, Node, or other build systems, then there’s a little bit more to cover regarding getting Node and Gulp installed and setting them up.

I’ve opted to skip out on that for now since there’s a lot of documentation around on this, but perhaps I’ll take a look at what we use whenever we’re incorporating this into our projects.