grunt-several commonly used tasks to configure, load, and execute the notation

Http://www.gruntjs.net/sample-gruntfile

Gruntfile instances

The following is a Gruntfile simple analysis of a case, or it can be used as an instance:

function(grunt) {  grunt.initConfig({    jshint: {      files: [‘Gruntfile.js‘, ‘src/**/*.js‘, ‘test/**/*.js‘],      options: {        globals: {          jQuery: true } } }, watch: { files: [‘<%= jshint.files %>‘], tasks: [‘jshint‘] } }); grunt.loadNpmTasks(‘grunt-contrib-jshint‘); grunt.loadNpmTasks(‘grunt-contrib-watch‘); grunt.registerTask(‘default‘, [‘jshint‘]);};

At the bottom of the page is the Gruntfile full content of this instance, and if you read this in order, you can follow us through each part of the file. We will use the following 5 Grunt plugins:

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

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

function(grunt) {}

In this function, we can initialize the configuration object:

grunt.initConfig({});

You can then package.json read the project configuration information from the file and deposit it into the pkg attribute. This allows us to access the package.json attributes listed in the file, as follows:

pkg: grunt.file.readJSON(‘package.json‘)

So far we can see the following configuration:

function(grunt) {  grunt.initConfig({    pkg: grunt.file.readJSON(‘package.json‘)  });};

Now we can define the appropriate configuration for each of our tasks (defining the task configuration we defined for the project one by one), and then the configuration object for each task as a property of the Grunt configuration object (that is, the configuration object accepted by Grunt.initconfig ({}). And this property name is the same as the task name. So the "concat" task is the "Concat" key (property) in our Configuration object. Here is the configuration object for my "concat" task.

concat: {  options: {    // 定义一个用于插入合并输出文件之间的字符    separator: ‘;‘  },  dist: {    // 将要被合并的文件    src: [‘src/**/*.js‘],    // 合并后的JS文件的存放位置 dest: ‘dist/<%= pkg.name %>.js‘ }}

Notice how I refer to the properties in the JSON file (which is the configuration file we introduced at the top of the configuration object) name . Here I use pkg.name to access the file information that we just introduced and stored in pkg the property package.json , which is parsed into a JavaScript object. Grunt comes with a simple template engine for outputting the configuration object (here is the package.json configuration object in the) property value, where I let the concat task src/ Merge all the files that exist in the directory at .js the end, and then store them in the dist directory, named after the project name.

Now let's configure the Uglify plugin, which functions as a compressed (minify) JavaScript file:

uglify: {  options: {    // 此处定义的banner注释将插入到输出文件的顶部    banner: ‘/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n‘  },  dist: {    files: {      ‘dist/<%= pkg.name %>.min.js‘: [‘<%= concat.dist.dest %>‘]    }  }}

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

The setup of the Qunit plugin is very simple. You just have to give it the location of the file used for the test run, and note that the Qunit 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‘],  // configure JSHint (documented at http://www.jshint.com/docs/) options: { // more options here if you want to override JSHint defaults globals: { jQuery: true, console: true, module: true } }}

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.

Finally, 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 you specify (where I use the same file that needs to be detected in the Jshint task), it executes the specified task in the order you specify (here I specify jshint and Qunit tasks).

Finally, we need to load the required grunt plugin. 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:

// 在命令行上输入"grunt test"，test task就会被执行。grunt.registerTask(‘test‘, [‘jshint‘, ‘qunit‘]);// 只需在命令行上输入"grunt"，就会执行default taskgrunt.registerTask(‘default‘, [‘jshint‘, ‘qunit‘, ‘concat‘, ‘uglify‘]);

Here is the final completed Gruntfile file:

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 jshint default configuration globals: {jQuery:True, console:true, module: true, Document: true}}, watch: { Files: [ ' <%= jshint.files%> '], tasks: [ ' Jshint ',  ' Qunit '} }); Grunt.loadnpmtasks ( ' grunt-contrib-uglify '); Grunt.loadnpmtasks ( ' Grunt-contrib-qunit '); Grunt.loadnpmtasks ( ' Grunt-contrib-concat '); Grunt.registertask ( ' Jshint ',  ' qunit ']); Grunt.registertask ( ' Jshint ',  ' Qunit ',  ' concat ',               

Found an error in the documentation? File an issue.

grunt-several commonly used tasks to configure, load, and execute the notation