In most coding practices, it's best practice to keep logic and data separated as much as possible. The same rule applies to the Grunt configuration logic and the data that it makes use of.
A very common use case for using data from an external source is the use of the project information contained in the package.json file. Information such as project names and version numbers might not change too often, but when they do, we'd probably prefer not having to look for them everywhere in the project.
Fortunately, the Grunt framework provides us with functions that allow us to easily read data from external files and store them in the configuration. This stored data can then also be easily used with the help of the string templates that are automatically processed for all configurations.
In this example, we'll work with the basic project structure that we created in the Setting up Grunt on a project recipe of this chapter. Be sure to refer to it if you are not yet familiar with it's contents.
The following steps take us through making use of data from the package.json file when generating an optimized version of a JavaScript source file.
For our example, we'll make use of the
contib-uglifyplugin, which can be used to compress JavaScript source files. Let's install it and load its tasks for using the instructions provided in the Installing a Plugin recipe of this chapter.We'll also need a simple JavaScript source file for the sake of our example. Let's create a file called
sample.jsin the root of our project directory and fill it with the following code:module.exports = function () { var sample = 'Sample'; console.log(sample); };Next, we'll import the data contained in our project's
pacakge.jsonfile by making use of thegrunt.file.readJSONfunction and assigning its result to a property calledpkgin our configuration. After adding this, our configuration object should look similar to the following:{ pkg: grunt.file.readJSON('package.json') }Now that we have the data imported form our project package, we can set up an
uglifytask, which will compress a JavaScript source file calledsample.js, using the version number contained in thepackage.jsonfile as part of the resulting file's name. This is done by adding the following to our configuration:uglify: { sample: { files: { 'sample_<%= pkg.version %>.js': 'sample.js' } } }Finally, we can use the
grunt uglifycommand to test our setup, which should produce output similar to the following:Running "uglify:sample" (uglify) task File sample_0.0.0.js created: 81 B → 57 B
We can now also take a look at our newly generated compressed version of the
sample.jsfile in thesample_0.0.0.jsfile, which should have content similar to the following:module.exports = function(){var a="Sample";console.log(a)};
The YAML format provides another popular way to store human readable data and can also be easily imported into our configuration. The following example, based on the work we did in the main recipe, demonstrates this functionality:
First, we'll create a simple YAML file for the purpose of our example. Let's create
sample.yamlin our project root and give it the following content:version: 0.0.0Now all we need to do is change the call to
grunt.file.readJSONto import our sample YAML file instead. We do this by changing thepkgconfiguration to the following:pkg: grunt.file.readYAML('sample.yaml')If we now run the Grunt
uglifycommand, we should see the same result as before, with output similar to the following:Running "uglify:sample" (uglify) task File sample_0.0.0.js created: 81 B → 57 B