Today, most front end web developers spend a lot of time with technologies like Sass, LESS, HTML and JavaScript. The last couple of years have been an exciting time in web development and technologies like Grunt have contributed to said excitement.
In this series, I plan on introducing you to Grunt and to talk about how it can improve our development of WordPress themes and plugins. We'll also work to setup Grunt to prepare it for use in your next project. Finally, we'll take a look at the command line tools, as well.
About Grunt
Grunt is an automation tool for front end developers. It's written in JavaScript, so it should be pretty to pick up and understand if you know JavaScript. Here's the description from the Grunt website:
In one word: automation. The less work you have to do when performing repetitive tasks like minification, compilation, unit testing, linting, etc, the easier your job becomes. After you've configured it, a task runner can do most of that mundane work for you—and your team—with basically zero effort.
Grunt is a operating system agnostic tool, so whether you develop on Mac, Windows, or Linux, you should be able to use it. This really makes it great for larger teams that do have a mixture of platforms with which they develop. The best part is that as you set up your project with Grunt, it is easily shareable to others as well. We will cover this more in another post.
Node.js
For those of you who haven't worked with or heard about it, Node.js is a JavaScript runtime. It has really taken off in the last few years and technologies like Grunt and Bower have really helped it accelerate adoption. Here's the description from the Node website:
Node.js is a platform built on Chrome's JavaScript runtime for easily building fast, scalable network applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices.
Node is the one prerequisite to use Grunt and you need to have it installed on your machine and possibly your servers. Grunt uses npm to install and manage plugins. You can read more about the requirements on the Getting Started page on the Grunt website.
Gruntfile
Once you get the tasks that you need for your project installed, you need a way to execute them. This is where the Gruntfile.js file comes into the picture. The Gruntfile specifies what tasks to include and the options you specify to execute them.
This is where you will most likely specify your targets and sources for each task. An example would be pointing to your precompiled .scss files and specifying the location where you want the compiled .css files to be saved to. You will also specify other options that each plugin will have available to you. These are usually documented with each plugin.
Tasks
Tasks are really where the power is in my opinion. A task is simply a way to execute a group of plugins.You will want to specify a default task that is executed when you run `grunt`. You can use the watch task so you can automatically execute tasks or plugins when specific files change in your project.
I plan on getting into tasks more in a later post.
Conclusion
Grunt is definitely a tool you should get to know if you are a front end or WordPress developer. This quote from the Grunt site really sums things up,
The Grunt ecosystem is huge and it's growing every day. With literally hundreds of plugins to choose from, you can use Grunt to automate just about anything with a minimum of effort. If someone hasn't already built what you need, authoring and publishing your own Grunt plugin to npm is a breeze.
If you haven't already started using it in your projects, you should definitely consider it.
Comments