Grunt Introductory Lecture 3: Walkthrough Using Gruntfile Configuration Tasks

This Gruntfile instance uses 5 Grunt plugins:

Grunt-contrib-uglify
Grunt-contrib-qunit
Grunt-contrib-concat
Grunt-contrib-jshint
Grunt-contrib-watch

The above Uglify,concat,watch three plug-ins with the most, the first plug-in is used to compress the file, the second plug-in is used to merge files, the third plug-in is used to listen to the contents of the file, if the contents of the file changed, it will trigger the callback method to handle the corresponding.

Let's take a step-by-step guide to this.Gruntfile 实例。

The first is the "wrapper" function, which contains the entire grunt configuration information.

Module.exports = function (grunt) {}

In this function, we can initialize the configuration object:

Grunt.initconfig ({});

The project configuration information is then read from the Package.json file and stored in the PKG attribute. This allows us to access the attributes listed in the Package.json file as follows:

Pkg:grunt.file.readJSON (' Package.json ')

So far we can see the following configuration:

Module.exports = function (grunt) {
Grunt.initconfig ({
Pkg:grunt.file.readJSON (' Package.json ')
});
};

Next we can define the corresponding configuration for each of our tasks, the configuration object for each task as a property of the grunt configuration object, and this property name is the same as the task name. So the "concat" task is the "concat" attribute in our Configuration object. Here is the configuration object for my "concat" task.

concat: {
Options: {
//define a character for inserting the merged output file
Span style= "Background-color: #ffffff;" > separator: '; '

Dist: {
//file to be merged
src: [' src/**/*.js '],

dest: ' dist/<%= pkg.name%>.js '
}

This is used pkg.name to access the file information that we just introduced and stored in pkg the attribute package.json , which is parsed into a JavaScript object. Grunt comes with a simple template engine for outputting configuration objects (here is the package.json configuration object in), where I let the concat task merge all the files that exist in the directory at the src/ end, .js and then store them in the dist directory, named after the project name.

Now let's configure the Uglify plugin, which works by compressing JavaScript files:

uglify: {
Options: {
// The banner comment defined here will be inserted at the top of the output file
banner: '/*! <%= pkg.name%& Gt <%= grunt.template.today ("dd-mm-yyyy")%> */\n '
}, 　　　　
Dist: {
Files: {
' dist/<%= pkg.name%>.min.js ': [' <%= Concat.di St.dest%> ']
}
}

Here we let uglify create a JavaScript file in the dist/directory that contains the results of the compression. Note that I use <%= concat.dist.dest> here, so uglify automatically compresses the files generated in the Concat task.

The setup of the Qunit plugin is very simple, you just need to give it the location of the files used for the test run, and note that the qunit here is running on the HTML file.

Qunit: {
Files: [' test/**/*.html ']
},

The configuration of the Jshint plugin is also simple:

 jshint: { //  Define the files to lint  files: [' gruntfile.js ', ' src/**/*.js ', ' test/**/*.js ' 

Jshint only requires an array of files (that is, an array of files you need to detect), then an Options object (this object is used to override the default detection rules provided by Jshint). You can view the complete document in the Jshint official documentation site. If you are happy with the default configuration provided by Jshint, you will not need to redefine them in gruntfile.

Then, let's take a look at the Watch plugin:

Watch: {  files: [' <%= jshint.files%> '],  tasks: [' jshint ', ' Qunit ']}

You can use the command line grunt watch to run this task. When it detects any of the files that you specify (where I use the files that need to be detected in the Jshint task), it performs the specified tasks in the order you specify (here I specify jshint and Qunit tasks).

Next, we're going to load the required grunt plug-ins. They should have all been installed through NPM.

Grunt.loadnpmtasks (' grunt-contrib-uglify '); Grunt.loadnpmtasks (' grunt-contrib-jshint '); Grunt.loadnpmtasks (' grunt-contrib-qunit '); Grunt.loadnpmtasks (' Grunt-contrib-watch '); Grunt.loadnpmtasks (' grunt-contrib-concat ');

Finally, some tasks are set. The most important is the default task:

// enter "Grunt test" on the command line and the test task will be executed. grunt.registertask (' Test ', [' jshint ', ' Qunit ']); // simply enter "Grunt" on the command line and the default taskgrunt.registertask (' Default ', [' jshint ', ' qunit ', ' concat ', ' uglify ') will be executed;

Here is the final finish Gruntfile.js .

Module.exports =function(Grunt) {Grunt.initconfig ({Pkg:grunt.file.readJSON (' Package.json '), concat: {options: {separator:‘;‘}, Dist: {src: [' Src/**/*.js '], dest:' Dist/<%= pkg.name%>.js '}}, Uglify: {options: {banner :‘/*! <%= pkg.name%> <%= grunt.template.today ("dd-mm-yyyy")%> */\n '}, Dist: {files: {' Dist/<%= pkg.name%>.min.js ': [' <%= concat.dist.dest%> ']}}, Qunit: {files: [' Test/**/*.html ']}, Jshint: {files: [' Gruntfile.js ', ' src/**/*.js ', ' test/**/*.js '], options: {//here is the option to overwrite the default configuration of JshintGlobals: {jQuery:true, console:true, module:true, Document:true}}} , watch: {files: [' <%= jshint.files%> '], tasks: [' Jshint ', ' qunit ']    }  }); Grunt.loadnpmtasks (' Grunt-contrib-uglify '); Grunt.loadnpmtasks (' Grunt-contrib-jshint '); Grunt.loadnpmtasks (' Grunt-contrib-qunit '); Grunt.loadnpmtasks (' Grunt-contrib-watch '); Grunt.loadnpmtasks (' Grunt-contrib-concat '); Grunt.registertask (' Test ', [' jshint ', ' qunit ']); Grunt.registertask (' Default ', [' jshint ', ' qunit ', ' concat ', ' uglify ']);};

Come on!

Grunt Introductory Lecture 3: Walkthrough Using Gruntfile Configuration Tasks