Loading Gruntfile configuration from a JSON file

The requirements are pretty simple, we’d like to tell Uglify to mangle a bunch of separate JavaScript files into one clean, minified file with sourcemaps to help debugging and learning.

But, the files are not all in one place and we don’t want to keep updating the Gruntfile configuration with complex glob rules – or perhaps the list of files changes based on configuration options defined somewhere else.

In the case of the Q Plugin, a file called q.module.json is generated when the settings are updated from inside the WordPress admin – you can see the specific action in the codebase – it is hooked to an ACF options page save routine.

Below is a very simplified version of the json file that is produced – showing a single file under the property javascript_path

Below is a slimmed-down gruntfile showing how we can use the grunt.file method to read the json file data and then assign an object of values from the javascript_path property to configuration

Notes:

• The data stored in the file is converted to json format via the PHP function json_encode
• The grunt.file method has a readJSON property which enables us to directly import the data from the json file
• We can pass the javascript_path object to Uglify using Grunt variables like <%= config.q_modules.javascript_path %>
• Enable logging via –verbose options when calling Grunt commands to get detailed feedback and locate issues.

Happy coding!