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.
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 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.
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 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.
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.
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.Update me weekly
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!Translate this post