Grunt-grunt use

Grunt is the front-end build tool, similar to the back-end use of ant, but also by configuring various tasks to achieve the front-end code to automatically build the goal. The Grunt and Grunt plugins are installed and managed via NPM, and NPM is the Nodejs Package Manager, so the first step is to install the NODEJS environment.

Make sure NPM updates to the latest version before installing Grunt, using NPM update-g NPM to upgrade on the command line

1, install the global GRUNT-CLI

GRUNT-CLI is not grunt,cli used to load grunt, pass configuration information in Gruntfile, and then run Gruntfile as specified in grunt. Gruntfile can be understood as the Build.xml file in Ant, which describes what tasks grunt to run, how to run them, and so on. Gruntfile is a standard JS file, usually placed in the project root directory.

Install command:npm install-g grunt-cli

The command needs to be executed under administrator privileges, or an error will be taken. Once the above command has been executed, theGrunt command is added to your system path and can be executed in any directory at a later time.

2. Create a new Package.json,gruntfile.js file under the project root directory

The Package.json file can use the NPM init command to create a most basic file. It mainly describes the name of the project, the version, and what grunt plug-ins are relied upon to publish this project as a NPM module. Grunt itself and grunt plug-ins need to be installed, grunt for the entire project, grunt plug-in is the implementation of the entire building process of each step of the module, such as the need to merge JS files, you need to find the appropriate grunt plug-ins.

Package.json Example

{  "name": "Htmltest",  "version": "1.0.0",  "description": "Test",  "main": "Index.js",  " Dependencies ": {    " NPM ":" ^2.15.1 "  },  " Devdependencies ": {    " grunt ":" ^1.0.1 ",    " Grunt-contrib-jshint ":" ^1.0.0 ",    " Grunt-contrib-nodeunit ":" ^1.0.0 ",    " grunt-contrib-uglify ":" ^1.0.1 "  },  "scripts": {    "test": "Echo \" Error:no test specified\ "&& exit 1"  },  "author": " Zhang ",  " license ":" ISC "}

gruntfile.js Example:

/** * Created by Administrator on 16-4-26. */module.exports = function (grunt) {    //Project configuration.    Grunt.initconfig ({        Pkg:grunt.file.readJSON (' Package.json '),        uglify: {            options: {                banner: '/*! < %= pkg.name%> <%= grunt.template.today ("Yyyy-mm-dd")%> */\n '            },            build: {                src: ' src/<%= Pkg.name%>.js ',                dest: ' build/<%= pkg.name%>.min.js '}}    );    Load the plug-in that contains the "uglify" task.    grunt.loadnpmtasks (' grunt-contrib-uglify ');    The list of tasks that are performed by default.    grunt.registertask (' Default ', [' uglify ']);

This file describes the task of compressing the JS file named Pkg.name. Running the grunt command at the project root will compress the completion.

3, install the grunt and grunt plugin commands in the Gruntfile.js file directory, and then create the Node_modules directory in the sibling directory to save the grunt itself and the grunt plugin. The devdependencies dependency description in Package.json is then automatically updated.

Install command:npm install grunt--save-dev

npm install grunt-contrib-jshint--save-dev

After the installation is complete, the grunt and grunt plugins are installed under the project and are not global. Running the grunt command in a directory where Grunt is not installed will cause an error.

4, here is an example of a complete Gruntfile file

All tasks and targets for module.exports = function (grunt) {//grunt are configured in Grunt.initconfig grunt.initconfig ({pkg:grunt.file.re            Adjson (' Package.json '),//Read JSON file, can later use the object in JSON file through module concat: {//concat task connection file as a file can be run separately via grunt Concat            Options: the {/////task-level attribute can be used to specify a default target that overrides the built-in property or to specify Opitons and overwrite the task-level separator: '; '                    }, Dist: {//dist is a goal in a task, a task can have multiple targets that can be run separately via grunt concat:dist src: [' src/**/*.js '], Dest: ' dist/<%= pkg.name%>.js '}}, Uglify: {//uglify task compress file options            : {banner: '/*! <%= pkg.name%> <%= grunt.template.today ("dd-mm-yyyy")%> */\n '}, Dist: {files: {//Concat the destination file of the dist target of the task ' dist/<%= pkg.name%&GT;.MIN.J S ': [' <%= concat.dist.dest%> '}}}, Qunit: {files: [' test/**/ *.html ']}, Jshint: {files: [' gruntfile.js ', ' src/**/*.js ', ' test/**/*.js '], options: {//This is covered Jshint Configuration options Globals: {jquery:true, console:true, MoD            Ule:true, Document:true}}}, watch: {//Monitor file change tasks    Files: [' <%= jshint.files%> '], tasks: [' jshint ', ' Qunit ']}});    Load the installed task module 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 ');    Register task test Run Grunt test will run Jshint qunit two task grunt.registertask (' Test ', [' jshint ', ' qunit ']); Registering a default task only runs grunt will run this default task Grunt.registertask (' Default ', [' jshint ', ' qunit ', ' concat ', ' uglify ');};

5,grunt's mission

Task aliases: Grunt.registertask (' dist ', [' concat:dist ',' uglify:dist ']);

Specifies that a task alias of Dist will run two tasks, [] for the task list

Multi-tasking:

Grunt.initconfig ({  log: {    foo: [1, 2, 3],    bar: ' Hello World ',    Baz:false  }}); Grunt.registermultitask (' log ', ' Log stuff. ', function () {  Grunt.log.writeln (this.target + ': ' + This.data);});

Custom tasks: Customize a task Foo, execute a task function, and execute bar Baz first

Grunt.registertask (' foo ', ' My ' foo ' task. ', function () {  //Enqueue "bar" and "Baz" tasks, to run after "foo" finishes , In-order.  Grunt.task.run (' Bar ', ' Baz ');  Or:  grunt.task.run ([' Bar ', ' Baz ');});

Grunt-grunt use