Grunt JavaScript World Build Tool (i)--grunt use Getting Started (by Vczero)

First, preface

The project has been using grunt, but the basic use of grunt, but not systematically summarized. Why build tools? Word: Automation. For tasks that require repetitive repetition, such as compression (Minification), compilation, unit testing, linting, and so on, automation tools can ease your labor and simplify your work. When you properly configure the task, the task runner will automatically help you or your team to do most of the boring work. Why use Grunt. The grunt ecosystem is very large and growing. With a large number of plugins to choose from, you can use grunt to automate anything and spend the least amount of time. If you can't find the plugin you need, create a grunt plugin yourself and publish it to NPM. --quoted Gruntjs official website. Come and see the logo of "Bull":

This logo bull, I really feel real cow.

Second, install grunt & plug-in

(1) First, you need to install node. js and have access to: node. JS installation.

(2) NPM install-g grunt-cli: In this way, the grunt command is appended to the system's environment path. The role of GRUNT-CLI is to dispatch different versions of Grunt. Grunt-cli each time the grunt is running, the grunt of the system is found through the require of the node. JS module.

(3) Create Package.json, Gruntfile.js/coffee

For Package.json, you are familiar with the development of node. JS for publishing and managing dependencies. Here, we can put the grunt configuration into the devdependencies.

Gruntfile.js or Gruntfile.coffee is the task used to configure the grunt.

Here, manually build a project find, manually create Package.json and gruntfile.js. Of course, you can initialize the Package.json file with the NPM init command, as shown in:

Package.json configuration:

{    "name": "Shangui ballad-find-grunt",    "version": "0.1.0",    "devdependencies":{         "Grunt": "~0.4.1",        "Grunt-contrib-jshint": "~0.6.0",        "Grunt-contrib-nodeunit": "~ 0.2.0 ",        " grunt-contrib-uglify ":" ~0.2.2 "    }}

Because the configuration has been completed in Package.json, you can use NPM to install it. Just used the Chinese name error, changed to English ok ("name": "Shanguiyao-find-grunt",). Install the grunt into the development environment.

(4) Installation Grunt

NPM Install grunt--save-dev

For example, the grunt installation was successful and the version grunt in Package.json was updated, now 4.5:

(5) Installing the grunt plug-in

In fact, you can install the Package.json grunt plugin using the same method as above. Since the Package.json description is already available, the NPM install is installed. After the installation is complete, the project Node-module under the following conditions:

Third, the use of gruntfile.js

Gruntfile should be stored in the project's root directory as well as the package. Gruntfile is primarily the configuration of projects and tasks, including custom tasks.

//the entire task must be exported module.exportsModule.exports =function(grunt) {//Grunt ConfigurationGrunt.initconfig ({Pkg:grunt.file.readJSON (' Package.json '),        //use of the uglify plugin to compress JS into a target fileuglify: {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. Grunt.loadnpmtasks (' grunt-contrib-uglify '); //Default Task ListGrunt.registertask (' Default ', [' uglify ']);};

Iv. use of Grunt

First, create the catalog src and shanguiyao-find-grunt.js.

var O = (function() {    var MyObject = {        "name": "Shangui ballad",        "url": " http://www.cnblogs.com/vczero/",        function() {},        function() { Console.log (' JavaScript world ');}    ;     function (){};     return MyObject;}) (); O.showlove ();

The entire project is as follows:

Use the grunt command:

OK, we can see the effect after compression.

Post-V Blog

(1) Grunt-cli source Reading

(2) Grunt configuration examples for large-scale projects

Grunt JavaScript World Build Tool (i)--grunt use Getting Started (by Vczero)