Using Grunt To Minify JavaScript In WordPress • twoggle

Log in

Sign in with your email address and password:

No account? Sign up here.
Forgot your password? Reset it here.
Didn't receive account confirmation email? Request a new one.


Using Grunt To Minify JavaScript In WordPress

In this tutorial we’ll look at how to minify JavaScript using the command line tool Grunt. More specifically, we will look at how to take the JS files in a WordPress plugin and minify them. There are a couple of benefits to doing this: Decreasing client (browser) bandwidth usage and  also add a touch of security (IP protection) to our JS code (obfuscating it). The downside is of course that by minifying (and obfuscating) our JS files, they become virtually unreadable for the user. However, this usually does not matter (unless your user base is a bunch of web-savvy developers who may need to debug your code!) and is usually a desirable outcome.

How to Minify JavaScript using Grunt

Getting Started: Install Node Package Manager (npm)

Let’s get the ball rolling by installing grunt. Grunt requires node.js, so we need to check node (and the package manager npm) is installed:
Check NPM package is installed
If you don’t have npm & node, you will need install them (installing node should install npm automatically):

After installing, run “npm -v” again to make sure it installed OK (mine is npm 1.3.10, running PHP 5.6). To check ‘node’ itself installed, type “man node” to bring up man pages for this command.

Install Grunt

Install grunt CLI globally

First, install the grunt command line interface (CLI) to be available globally. This will allow grunt commands to be run from any directory:

Install Grunt Task Runner (locally)

The Grunt task runner is installed on a per-project basis: each project has it installed locally.

Inside your project root folder (same folder as wp-config.php file), create file package.json and it’s contents outlined below. Replace ‘my-project-name’ with your project (note: must be a no-spaces string). The devDependencies define the libraries required by grunt to complete the tasks we will be specifying shortly in another file (the Gruntfile.js).

package.json:

In the shell command line, navigate to your root folder (folder containing package.json) and install the grunt task runner by executing command:

Grunt should now be installed locally (the folder ‘node_modules’ is automatically created).

Using Grunt

Test Gruntfile.js

Now that we have the grunt task runner tool installed, it’s time to configure our local project and give it a whirl.

As previously mentioned, we need a Gruntfile.js file to configure our grunt tasks. Let’s do a very simple test by creating a super simple Gruntfile.js (in same root folder as package.json) as follows:

Gruntfile.js

Running command ‘grunt test’ shows our grunt task runner is working as expected. Too easy.

Test Grunt.js Works

Minify JavaScript

Now we know our Gruntfile.js works OK, let’s move on to more exciting things – minifying some JavaScript!

New Gruntfile.js:

Note that the ‘dist’ sub-task underneath ‘uglify’ is just a random task name you use, the name does not matter. The banner option gives us a timestamp at the top of our generated files.

Now running command ‘grunt’ does the minify-zation of my JavaScript successfully:

Using Grunt To Minify JavaScript in WordPress

Grunt forth and be happy

We have learnt how to use the Grunt Task runner tool to minify JS in our WordPress (or any PHP) projects. Grunt can actually achieve many more things (file concatenation, CSS compilation using SASS/LESS, run command line statements such as git pull, etc). For further information, see more Grunt examples.

We’d love to hear how you use Grunt in your own projects?


Submit a Comment