Why Do We Use These Tools?

If you think you don’t need tools like gulp and Composer, think again. Embrace them and you will be become better at your job.

Last week I came across a thread in the Advanced WordPress group about Roots and Sage. One of the commenters said:

That was exactly what drove me away from Roots, you need to talk "nerdish" to use it.

I’ve heard similar statements before, and my reaction is always the same. Back when the Roots starter theme (now known as Sage) was first created, pre-processors weren’t really a thing that developers used. As time went on, Sass and Less quickly gained popularity. Tools like CodeKit and Grunt also came out, and allowed developers to compile stylesheets and scripts with ease.

When writing WordPress themes it’s important to incorporate front-end best practices. Chris Coyier wrote an article back in December 2013 titled Grunt for People Who Think Things Like Grunt are Weird and Hard. It’s a great overview of why you should be using a build tool. It seems weird to me that in 2015 there are still developers that are scared of build tools.

Another commenter in the AWP thread said:

It changes a lot. Seems like every time I start a new project I have to relearn stuff … I don’t really want to nag on their forum, but would like something a little more fundamentally stable.

You’ve probably already figured out that the web moves forward quickly. Standards are always evolving. New tools come out all of the time that help improve our workflow.

All of our projects use other open source projects to help make development easier when working on WordPress sites.

Sage uses:

  • Bower to pull in front-end packages, such as Bootstrap (which can be removed or replaced with your framework of choice) and JavaScript plugins. These packages are gitignore’d so that you can keep your Git repository clean by not including third party code that shouldn’t be modified.

  • gulp as a build system. In previous versions of the theme we used Grunt. We use gulp to:

    • Compile Sass or Less for stylesheets
    • Concatenate and minify scripts and stylesheets
    • Optimize images automatically
    • Reload your browser and keep multiple devices in sync while developing with BrowserSync

Both Bower and gulp require npm, the Node package manager. If you use nvm, or Node Version Manager, you can avoid permission issues that some users run into.

Bedrock uses:

Trellis uses:

  • Vagrant for development environments
  • Ansible for running playbooks that get your development, staging, and production servers setup with everything you need to build a modern WordPress site

Sage, Bedrock, and Trellis all use some sort of package management to help keep your repo tidy and your projects more portable.

The common theme between all our projects is that we take advantage of existing tools that solve hard problems.

Roots embraces the open source ethos and believes in peer production. Through our team and community, we have dedicated thousands of person-hours to building and continuously improving our projects since 2011. Over 200 individual contributors have come together and contributed to help make better tools for WordPress under the Roots name.

When you use our projects, you are starting at place that wouldn’t be possible for any individual alone. We stand on the shoulders of giants and let you stand on ours.

Are your a web developer that works with WordPress? Our goal is to make your job easier.

Read the discussion on our Discourse

Get our latest updates & occasional tips on building better WordPress sites

Follow @rootswp on Twitter