Themergency fooplugins.com

Grunt For WordPress Developers

| 0 comments

This is day 16 of my WordPress Developer Advent Calendar.

Chris Coyier recently published a great article Grunt for People Who Think Things Like Grunt are Weird and Hard. I love Grunt too and use it daily.

What Is Grunt?

Grunt is a task runner that runs on node.js. It allows you to automate all those boring, repetitive tasks that we deal with every day as developers. For example:

  • Minify and combine all your javscript source files
  • Compress images
  • Compile your SASS into CSS

I am not going to over how to install Grunt or set it up. I will leave that to Chris’ article as he does a great job. I rather wanted to share how you could use it as a WordPress developer.

If I Code for WordPress, Should I Care?

Oh hell yes! If you write plugins or themes for WordPress, the chances that you write a bit of javascript and CSS is pretty high. Obviously, there are Grunt plugins that work with JS and CSS, but it doesn’t just stop there. Grunt has tons of plugins, and here are a few which you could start using in your next WordPress plugin or theme:

  • CSS
    • contrib-less - compile your LESS files to CSS.
    • contrib-compass - compile your Sass files to CSS.
    • contrib-csslint - run CSS Lint on your CSS files.
    • contrib-css - minify your CSS files.
  • Javascript
    • contrib-coffee - compile your Coffeescript files to javascript.
    • contrib-jshint - validate your javscript with JS Hint.
    • contrib-uglify - minify your javascript files.
  • Images
    • contrib-imagemin - Minify your PNG, JPG and GIF images.
  • General
    • contrib-concat - combine your JS or CSS files.
    • contrib-copy - copy files and folders around.
  • PHP
    • phpunit - run your phpunit unit tests.
    • phplint - validate your PHP files.
  • WordPress
    • pot - generates a .POT file that can be used for translations.
    • checkwpversion - make sure your plugin version numbers are all in sync. (in your plugin’s header, readme.txt and package.json)
    • checktextdomain - checks the correct text domain is passed when using the WordPress translation functions.
    • wp-readme-to-markdown - Converts readme.txt file to readme.md for use in Github repo.

Other Uses For Grunt

Grunt also provides project scaffolding, which allows you to generate your boilerplate code with little effort. I created a grunt-init template which is based off the WordPress Plugin Boilerplate.