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?
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:
"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:
"description": "Awesome project",
As you install other Grunt plugins and add
--save-dev to the end, you will see them added under the
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.
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,
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.
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.
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.
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