Shulou(Shulou.com)06/02 Report--

This article mainly explains "how to use Gruntfile.js". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn how to use Gruntfile.js.

I. brief introduction of grunt module

Grunt plug-in is an automation tool in npm environment. For tasks that need to be repeated over and over again, such as compression, compilation, unit testing, linting, etc., automation tools can reduce your work and simplify your work. The grunt module performs tasks according to the configuration in the Gruntfile.js file. If you define the following command in package.json:

[recommended for related courses: JavaScript video tutorial]

"scripts": {"build": "npm install & & grunt"}

Because running npm run build first installs some of the modules defined in devDependencies, running npm run build is tantamount to doing the following:

● npm install grunt-cli-g

● npm install

● grunt

Second, the structure of gruntfile.js:

● "wrapper" function

● project and task configuration

● loads grunt plug-ins and tasks

● Custom Task

Third, "wrapper" function

Every Gruntfile.js (and grunt plug-in) follows the same format, and the Grunt code you write must be placed in this function:

Module.exports = function (grunt) {/ / do grunt-related things in here} IV. Project and task configuration

Most Grunt tasks rely on some configuration data, and we use the grunt.initConfig method to configure the parameters of the Grunt task. The argument to the grunt.initConfig method is a JSON object in which you can store arbitrary data. In addition, since this is JavaScript itself, you can use any valid JS code here. You can even use template strings to refer to properties that have been configured, such as:

/ / Project and task configuration grunt.initConfig ({pkg: grunt.file.readJSON ('package.json'), / / get metadata (js code) in package.json proj: {name:'hello', description:'a hello demo'}, hello: {options: {name:'' / / match hello} with template string, srcs: ['1.txtmatch,' 2.txt']}})

The properties configured in the grunt.initConfig method can be accessed by the grunt.config method in the task module, for example:

Grunt.config ("proj.name")

In addition, the grunt task module will automatically extract the attributes corresponding to the task name in the configuration object according to the task name, such as defining the task hello, then configure the configuration and data needed in the task execution function in the attribute "hello" corresponding to the configuration object.

Load the grunt plug-in task

To reduce duplication of effort, we can load existing plug-in tasks.

1. Load your own private grunt plug-in

You can put some of the task scripts you define in the same directory and load all grunt task scripts in that directory from the specified directory through the grunt.loadTasks method.

two。 Load the grunt plug-in released in npm

Common tasks such as grunt-contrib-copy and grunt-contrib-uglify have been developed in the form of grunt plug-ins and published in the npm open library. As long as the plug-ins you need are listed in dependency in the package.json file and installed through npm install, you can load the task directly.

/ / load plug-ins that provide "copy" tasks. Grunt.loadNpmTasks ('grunt-contrib-copy'); 3. Directly load all plug-ins that start with "grunt-"

There is a load-grunt-tasks plug-in on npm that can be used to load all plug-ins in the dependency list that start with "grunt-". List the plug-ins that need to be used at the beginning of "grunt-" in dependency, and then call them in Gruntfile.js.

/ / Load grunt tasks from NPM packagesload-grunt- tasks VI. Custom tasks

1. Define the behavior of a task directly

Grunt.registerTask ('hello',' Show some msg', function () {console.log (this.options () .name); / / output hello}); 2. Defined as a task list

A task can be defined as a combination of a series of tasks that will be executed sequentially.

Grunt.registerTask ('dothings',' copy and Show some msg', ['copy','hello']); 3. Define default tasks

By defining default tasks, you can have Grunt perform one or more tasks by default. If you do not specify a task when you execute the grunt command, the default task will be executed. Executing grunt is equivalent to executing grunt hello as defined below.

Grunt.registerTask ('default', [' hello']); 4. Define compound tasks

The registerMultiTask method can define a compound task, and the compound task will treat the properties defined except options in the corresponding properties configured in the grunt.initConfig method as target:data pairs in turn.

Module.exports = function (grunt) {grunt.initConfig ({Log: {options: {sep:';'}, srcs: ['1.txtbath,' 2.txt'], dests: ['d1.txthammer,' d2.txt']}}) Grunt.registerMultiTask ("Log", function () {var options = this.options ({sep:'&'}); console.log (this.target); console.log (this.data.join (options.sep);});}

Executing grunt Log will output:

Running "Log:srcs" (Log) tasksrcs1.txt;2.txtRunning "Log:dests" (Log) taskdestsd1.txt;d2.txt

Define task behavior Tips

1. Other tasks can be performed within the task.

Grunt.registerTask ('mytask', function () {grunt.task.run (' task1', 'task2'); / / Or: grunt.task.run ([task1',' task2']);}); 2. Define asynchronous tasks

Grunt.registerTask ('mytask', function () {var done = this.async (); / / do something done ();}); 3. When a task fails, all subsequent tasks are terminated

In a task, when execution fails, you can return false to indicate that the current task failed. In general, multiple tasks are executed sequentially. If any task fails, all subsequent tasks will be terminated. You can add-force after the command line to enable subsequent tasks to continue when a task fails.

4. Check the status of the predecessor task during the task

Some tasks can depend on the successful execution of other tasks. Check through the grunt.task.requires method to see if its predecessor has been executed and has not failed.

5. Check the configuration properties during the task

You can use the method grunt.task.requiresConfig to specify that the configuration property of one or more strings or arrays is required. If one or more required configuration properties are missing, the system is notified that the current task failed.

Thank you for your reading, the above is the content of "how to use Gruntfile.js", after the study of this article, I believe you have a deeper understanding of how to use Gruntfile.js, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.