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).
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.
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.
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:
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.
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.
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.
There are some dependencies for this particular library so you’ll need to make sure they are included, as well. These include
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.