Blog

Automation: The Future of WordPress Development

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

You simply can’t avoid it. The standards for Web Development have changed significantly over the last few years. Just as an example, not too long ago, relying on JavaScript completely was considered a bad practice. Nowadays, you can easily find countless websites embracing JavaScript libraries like it’s the new norm.

Not only that, but JavaScript has proved itself as the leading language for the web, and the term “full stack developer” in the context of JavaScript has finally bridged the gap between front-end and server-side, bringing massive change and innovation to the web 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

Gulp.js Automation in WordPress

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.

Now, this might sound hard to set up, but it’s actually pretty simple. Gulp divides its functionality into “tasks”. Each task can run independent of the other tasks. This allows you to define tasks that do very specific things: one for handling SASS to CSS compilation, JavaScript optimization and minification.

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

Bower Automation in WordPress
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

So how may we use Gulp with Bower to create a better development process? In short we’re going to pipe our own custom CSS/SCSS/LESS/JavaScript files as well as Bower packages into Gulp, which is going to take care of various automatic tasks for us.

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.

Stay tuned!

Maor Chasen

A proud WordPress Developer and contributor. Maor focuses on plugin development and occasionally contributes to WordPress core.

18 Comments:

  • CDK Computers

    Good article bro, wait for next part… Maybe you plan to write about “Vagrant” like one of features for modern development?

    Reply

    • Maor Chasen

      Thank you! I’m definitely planning to cover this topic, but this post series probably won’t be discussing Vagrant. Vagrant has undoubtedly become an integral part of the modern WordPress development flow and it’s just a matter of time until I’ll publish a post about it. Keep following and thanks again for writing in!

      Reply

  • Mark J Armstrong

    Where is the best & easiest place to learn this?

    Reply

    • Maor Chasen

      I’m going to cover all of this in the next post, so be sure to follow us on social media to be notified when the post is out!

      Reply

  • José Cage

    Nice news for wp devs.. 🙂

    Reply

  • Robert Gordon (@rgordn)

    +1 Mark. I’d like to know the best way to learn these technologies as well as I haven’t personally adapted them. I’ve been a front end developer for a decade working with WordPress since 1.0 but the aforementioned technologies have always eluded me. There was never a “definitive” guide to implementing them or using them in a workflow. Sure you could seek out and research each one and learn it but I never found the ultimate usefulness. Now that the emphasis is on optimization and workflow and since there are so many more widespread and adaptable technologies to us, it’s probably time that integrate these into my workflow. Looking forward to the next article.

    Reply

  • Tal Gerafi

    In order to compile and minify there are already WordPress plugins exists for this.
    Why should we use Gulp for this?

    Reply

  • James Thompson

    I’ve been researching more into Gulp lately, seems like a decent automation tool. Can’t wait to see when the next post comes out. 🙂

    Reply

  • Gabor Lippert

    “You simply can’t avoid it.”
    Wrong. Actually I can. And actually I do.
    Fun thing is that my development process is much faster, more structured and better organized when I do not automate.
    Oh, and last but not least: more reliable.

    I would add I’m working with small business clients – I can imagine that for agencies specializing in various more complicated portal, company webisite or app development automation might be a good thing.

    Reply

    • Rami Yushuvaev

      Not sure I agree.

      In the resent years, even with small projects you need to compile SCSS files, merge CSS/JS files and minify them, update wrong Text-Domains, generate POT files and much more…

      Reply

  • dialady

    Great teaser! Looking forward to the next in your series!

    Reply

  • Annalyn

    I’ve been using this workflow for the past year with the help of some already made WordPress with Gulp, Bower and Sass.

    It would be great if I can make my own by simply following your instructions.

    I can’t wait for the next chapters 🙂

    Reply

    • Maor Chasen

      Thank you for the kind words, Annalyn!
      This is for sure one of the best automated workflows I ever had in my development career. It’s coming right up real soon!

      Reply

  • Jamal

    Spoiler alert… spoiler alert…

    Bookmark for the rest of articles…

    Reply

  • Anh Tran

    After a year working with Grunt and Gulp, I switched to use NPM scripts. It’s not only faster, but take less space on my SDD (I hate node_modules folder).

    Reply

    • Maor Chasen

      It’s definitely a valid argument. A lot has changed since Gulp and Grunt were released, and there are somewhat modern alternatives like webpack.
      I’m just going to write about my experience with automation, and it’s up to the reader to choose the tool that’ll do the job, there are so many to choose from, and I decided to go with Gulp since it seems the easiest to learn and use. (Plus, it allows people to learn a little about Node.js alone the way, which is cool.)

      Reply

  • Ahmad Awais

    Good one, Maor!
    Automation FTW! Having a good workflow pays you over and over again.

    Don’t forget to checkout WPGulp. It’s a portable automation workflow that I built last year, it’s being used by 200+ projects.

    Reply

Leave a Reply