Automation. You surely have heard of it in the context of web development. But what does it really mean? If you’re still unsure about what it means, keep reading. You will enjoy this new way of developing for the web (and WordPress eventually to be more precise), guaranteed. Yes, enjoy. I really mean it. Be open for this new adventure, you’re going to love it.
ATTENTION: Next part in the Automation series is out: Part II: Practical Guide.
Changes in the Development World
Inevitably, with that crazy wave of change, a handful of fresh and game-changing technologies have showed up in the recent years.
Kicking your Development Habits into Higher Gear
I’m talking about tools for development simplification and automation. At least one is a big buzzword lately. I’m talking about the ones that change the way we develop for the web. Some, but not all, are — Grunt, Gulp, SASS (CSS Extension), Unit Testing, Travis CI, etc.
For some unknown reason, many web developers who work with WordPress weren’t as fast to adopt these tools as their fellow developers who develop just static sites.
Automation, The WordPress Way
Okay, so how does this apply for us, WordPress developers, you might ask. And the answer is simple. There are no limitations here. It’s just that you have to take the way WordPress works into consideration when working with these tools, and it could be a one-off process, so you don’t have to repeat it over and over again every time you wish to create a new WordPress website.
So, I’m going to split this guide into two chapters. The first one is going to be a sneak peak into how the modern WordPress development process looks like, and in the second chapter I’ll discuss the more technical details and go into much greater detail. Let’s go!
Your Most Refreshing Gulp to Date
Cool, so what is Gulp? To put it simply, Gulp is an automation tool which widely supports development-related processes and workflows.
A simple yet practical example would be — say you’re writing some SASS (the CSS extension library) for your WordPress theme. You could use a GUI tool for compiling the sources into a final CSS file, or you can do it with a Gulp library. Why use Gulp for that? Because you can further extend this compilation process and have greater control over the final code. Say you’re ready to deploy the site, you can run a simple task that will minify the CSS so it’s production-ready.
Gulp also lets you run tasks that run in the background, allowing you to freely work on your project and trigger specific tasks once files in your project are being changed in real time.
Gulp has a bunch of plugins designed for WordPress development-related workflows.
Just to name a few:
- gulp-potomo — Gulp plugin to compile .po files into binary .mo files with msgfmt.
- gulp-checktextdomain — A Gulp plugin that checks gettext calls for missing or incorrect text-domain.
- gulp-readme-to-markdown — Convert WordPress.org readme.txt files to GitHub-flavored markdown.
We’ll touch on that later.
Bower: The missing part in the puzzle
Woah! We’re not done yet. Bower is here to fix a long-time problem we’ve all dealt with one way or another — managing dependencies and third-party, front-end libraries. Good examples would be Twitter’s Bootstrap, ZURB’s Foundation, various jQuery lightbox libraries, various jQuery slider libraries, jQuery itself, and so on. Almost any front-end library you can think of is most likely on Bower.
Okay, so what’s wrong with manually managing third-party libraries? Mostly, it’s the lack of track over these libraries. That can especially become an issue whenever you need to upgrade a library. It’s critically important you make sure different versions of the various libraries you decide to use mesh together so no conflicts are being introduced. If you won’t manage your packages and their update process, running into a conflict becomes a matter of time. That’s when a package manager such as Bower comes in handy, and solves all of that for you.
As mentioned earlier, we’ll dive into the technical in the upcoming post in this series.
In Summary, What We’re Going To Touch On
We’ll touch on these Gulp topics:
- Compiling SCSS/LESS files into a single CSS file
- Minifying/Uglifying the compiled CSS file (so your WordPress site loads faster)
- Merging multiple JS files into one compact JS file
- Optimizing images for use on production for faster page load
- Verifying and enforcing proper WordPress Coding Standards are in place
- Updating browser while working on PHP/CSS/JS files, using BrowserSync
- Setting up a linter with support for SCSS/LESS/CSS
- Creating a staging-ready release (keeping sources as-is)
- Creating a lean production-ready release (minified/optimized files)
- And more and more…
In the next chapter, I’ll introduce you to how to do all of these on a technical level.
If you have any questions about the fundamentals I explained in this post, please share in the comments below and I’ll respond in detail.