In the first part of this series I gave a quick overview of Grunt. I also talked through the different technologies that it requires in order to use. After that, I got a little into the Gruntfile and the tasks inside of it.
Now I want to talk about how using Grunt can improve your development for both WordPress themes and plugins.
Easy Project Setup
My favorite part about using Grunt and npm is that as you set up your project, it is self-documenting your project's dependencies. This is great for development teams and open-source projects. Who want's to write documentation on how to setup a workspace anyway, right?
package.json
First, you will need to have a package.json file in your project. You will need to have the project's name, version, and description set up. We will get into more detail around this in the next post, but here's an example:
{
"name": "project-name",
"version": "1.0.0",
"description": "Awesome project"}
Once you have this set up, when you install a grunt plugin, you just need to append --save-dev to the end and it will add the plugin to your package.json file under devDependencies. For instance, if I wanted to add the grunt-contrib-watch plugin to my project I would run the following command:
npm install grunt-contrib-watch --save-dev
You will see the plugin added to your node_modules folder and it should also result in your package.json file to look like this:
{
"name": "project-name",
"version": "1.0.0",
"description": "Awesome project", "devDependencies": {
"grunt-contrib-watch": "~0.5.x"
}}
As you install other Grunt plugins and add --save-dev to the end, you will see them added under the devDependencies object.
npm install
Why is this beneficial? Like I mentioned earlier, this is self documenting your projects dependencies. Once you get all your plugins installed and added to your package.json file, now another team member or contributor can run npm install and they will install everything needed for the project.
You can test this out pretty easily by deleting your entire node_modules folder and running npm install yourself. You will see everything you setup installed automatically.
[note]You will want to add the node_modules folder to your .gitignore file so you don't bloat your repository.[/note]
Watch For Changes
I use a lot of similar Grunt plugins with each project, but the one that I always install is the one I referenced before, grunt-contrib-watch. This plugin when executed will watch your project's files and will kick off any tasks you have specified for that file or file type.
One example would be for any of your JavaScript files. When you make changes to one of them and save it, then you can have Grunt run a JSLint, concat, and minify task. You can specify an order as well, so when one succeeds, the next gets kicked off. If one fails, then it kills the entire task sequence.
CodeKit has a similar feature, but it runs all of your tasks. For instance, if you make a change to a SASS or LESS file, it not only kicks off those tasks, but it also kicks off your JavaScript file tasks as well. The Grunt watch task gives you more control over what tasks run when specific files or file types are changed.
Creating Custom Tasks
Along with the Grunt tasks for the plugins you install, you can create your own custom tasks. A lot of times when I set up a project I have 3 tasks that I setup, default, setup, and build.
Default
The default task is the task that will run with you execute grunt from the command line. A lot of times I will map my watch task to default. You can add whatever task you want to run as well.
Setup
The setup task that I setup usually does the things that only need to happen the first time to set your project setup. A lot of times I use Bower to load third party libraries like Bootstrap and need to pull those down then run a copy task to move some files into my project and then kick off an initial compile of the LESS and JavaScript files.
Build
The build task is used for the things needed to be done before releasing or distributing your project. I always run this to make sure that everything is concatenated, minified and compressed. A great example is running grunt-contrib-imagemin to optimize all of the images in your project. Another example is using the grunt-contrib-compress to create a zip file of your theme so it's easy to install via the WordPress admin.
Conclusion
Grunt is definitely a great tool for teams of developers. From automatically documenting your project's dependencies to building custom, Grunt makes you efficient. Use Grunt to automate different tasks in your project so you can focus on building your WordPress theme or plugin.
Comments