Using Grunt with grunt-replace to replace handlebars/mustache with package.json variables

Grunt grunt-replace handlebars/mustache example

Recently while¬†testing out some Node.js modules for Grunt I came across grunt-replace, and my first though was, this would be great for setting up boilerplate PHP files for my WordPress plugins. ¬†Because I already set the name, slug, version, and other details in the¬† package.json¬†file, it would be great to use a template I could create for PHP files and just use Grunt to take the details from ¬† package.json¬†¬†and setup my base plugin files using a template syntax like Handlebars or Mustache. ¬†Luckily for me it worked out perfectly, but did require a little bit of troubleshooting and head scratching, but here’s how to make it work …

Example package.json file

Below you will find an example   package.json file.  One thing to note,   name  has to be lowercase without spaces, I decided to just use that as the WordPress slug, but you could always add slug if you want.

As you can see above I added a few custom variables that will be used in the templates below.  You can add as many as you want, it all depends on your setup.  You will need to make sure that grunt-replace is in devDependencies, this can be done easily by running  npm install grunt-replace --save-dev

Example Gruntfile.js

Example smyles-plugin.php

Above is an example plugin file that we will be replacing the Handlebars/Mustache template variables with our details from the package.json file.  I removed as much as I could from the PHP file to keep it as simple as possible.  Now we will go through each section to explain how it works.

How it all works

The package.json file is pretty self explanatory, just setup whatever variables you want to use, and Grunt will pull the details from that file and replace them in your PHP file.

The Gruntfile.js is the meat of everything, but the main area you need to focus on is ¬† replacement¬† where the real magic happens…

The first line match uses RegEx to match the Handlebars/Mustache template variables, and replacement uses an anonymous function to return the data for replacement.

 

Match will do just that, match (and group) all {{something}} , it will also group just the wording inside which in this case is something .

 

The replacement section calls an anonymous function with all the attributes you see above, but we will only need a couple of them. ¬†If you’re familiar with Grunt you already know that normally you could just use something like this to reference the object and not need to use an anonymous function:

Unfortunately this will not work for our case as that is an internal Grunt template string and we need to get the property value of the object based off a variable (which is obtained via RegEx).  So, the solution I found to this problem was to simply use an anonymous function, and then inside that anonymous function, reference the pkg  object and the property based off our variable, which in this case is string .

The one thing I want to point out is that I had to load the pkg object at the top of the Grunt file in order to reference it in the replace anonymous function.  You will notice that pkg is defined right below the module.exports and right above the grunt.initConfig, this is required in order to work correctly.


 

That’s all there is to it! ¬†You should now have a new file under the /build¬†¬†directory that has been updated with all of your details from the package.json¬†¬†file. ¬†Profit!

 

Myles

Orlando, FL

Did this post help you?

Give back and rate it for me!

Related Posts