Learn how to use Grunt to package JavaScript and CSS programs _node.js

Maven in the Java World provides powerful package dependency management and build lifecycle management. In the JavaScript world, with the popularity of Node.js, JavaScript native building tools have become possible.

Grunt.js is a node.js automated task Manager. Grunt.js combined with NPM's package dependency management, it's perfectly comparable to Maven. Grunt.js is natural for building front-end applications-not just JavaScript projects, but also application building in other languages. More and more JavaScript projects are already using grunt, with the largest users including the famous jquery project.

Grunt's ecosystem is growing rapidly and there are hundreds of plug-ins available to choose from on NPM. At the same time, anyone can easily release their plug-ins to NPM for other people to use.

Grunt does not emphasize the lifecycle of the build as Maven does, the sequence of tasks can be configured randomly. The grunt itself is only an actuator, and a large number of features exist in NPM-managed plug-ins. In particular, the core plug-ins that start with grunt-contrib-cover most of the core functions, such as handlebars,jade,less,compass,jshint,jasmine,clean,concat,minify,copy, Uglify,watch,minify,uglify and so on.

By providing a common interface for code Instrumentation (Lint), merging, compression, testing, and versioning, Grunt makes the entry threshold much less critical.

One, install Nodejs,grunt, and grunt plugin
1, install Nodejs
Download Address: https://nodejs.org/download/

2, install grunt, and plugin

NPM Install grunt-g  //install GRUNT,-G global variable 
npm install grunt-cli-g//install grunt command line 
npm install grunt--save-dev  //Install grunt,--Save-dev save to the installation directory 
NPM install GRUNT-CLI--save-dev//install grunt command line 
NPM install Grunt-contrib-jshint--save-dev//JS Syntax detection plug-in 
NPM install grunt-contrib-concat--save-dev//js Merge plugins 
npm install Grunt-contrib-uglify--save-dev//js Compression plugin 
npm install grunt-contrib-cssmin--save-dev//css Compression Plugin 

Grunt and Grunt-cli,-g and--save-dev are installed, it is recommended that this will save mistakes.
3, create the working directory
when the above installation is finished, Node_modules contains the plug-ins installed above, Nodejs the node_modules,copy in the installation directory to the new directory, and creates Gruntfile.js,package.json,
Note here that Gruntfile.js,package.json must be in the same directory as this node_modules, otherwise it will make an error when invoking the grunt plugin, for example:

>> local Npm module "Grunt-contrib-uglify" is not found. Is it installed?
Warning:task "uglify" not found. Use--force to continue.

If you do not install the Grunt-contrib-uglify plugin, you will also report this error.

Second, create Gruntfile.js and Package.json
1,package.json

{ 
 "name": "Jstest", " 
 file": "Function", 
 "version": "0.1.0", 
 "Devdependencies": { 
 "grunt": "~ 0.4.5 ", 
 " Grunt-contrib-jshint ":" ~0.11.3 ",//The following number is the version number, from the various Plug-ins directory Package.json can find 
 " Grunt-contrib-concat ":" ~0.5.1 ", 
 " grunt-contrib-uglify ":" ~0.9.2 ", 
 " grunt-contrib-cssmin ":" ~0.14.0 " 
 } 
 

2,gruntfile.js

Module.exports = function (grunt) {//Grunt configuration Grunt.initconfig ({pkg:grunt.file.readJSON (' Package.json '), Conca 
  T: {options: {separator: '; '  }, Dist: {src: [' js_s/function.js ', ' js_s/jquery.validate.js '], dest: ' js_d/main.js '/merge without compression}}, Uglify: {options: {banner: '/*! <%= pkg.name%> <%= (' grunt.template.today ') yyyy-mm-dd%> '//File top Comment, customizable 
  Build: {//Compress and rename the file in the Package.json to src: ' js_s/<%= pkg.file%>.js ',//Note the space, official configuration example is Pkg.name Dest: ' js_d/<%= pkg.file%>.min.js '//attention to space, official configuration example is Pkg.name}, Buildall: {///Will js_s folder all JS files, compressed, put into the Js_d folder, text 
  filename unchanged files: [{expand:true, CWD: ' js_s ',//js directory src: ' **/*.js ',//All JS file dest: ' js_d '//output to this directory}]}, Hebin: {///Function.js and Jquery.validate.js, merged and compressed into main.min.js files: {' js_d/main.min.js ': [' js_s/function.js ', ' Js_ S/jquery.validate.js ']}, Ymain: {//compress main.js into main1.min.js src: ' js_d/main.js ', dest: ' JS_d/main1.min.js '}}, Jshint: {//check, function.js syntax error all: [' Js_s/function.js ']}, Cssmin: {combine:  
     {files: {//The CSS file in the css_s folder is synthesized into a ' css_d/main.css ': [' Css_s/*.css ']}}, Minify: {options: { 
     keepspecialcomments:0, * Delete all comments/* Banner: '/* minified CSS File/'}, Files: {//single CSS files compression 
   ' Css_d/index.min.css ': [' css_s/index.css ']}, Test: {//By folder all CSS files, compressed, put into a new folder, file name unchanged files: [{ 
 Expand:true, CWD: ' css_s ',//css directory src: ' **/*.css ',//all CSS files dest: ' css_d '/output to this directory}]}}; 
 Load plugin grunt.loadnpmtasks (' grunt-contrib-uglify '); 
 Grunt.loadnpmtasks (' Grunt-contrib-concat '); 
 Grunt.loadnpmtasks (' Grunt-contrib-jshint '); 
 
 Grunt.loadnpmtasks (' grunt-contrib-cssmin '); 
 Whether to invoke plug-in functionality//grunt.registertask (' Default ', [' concat ', ' uglify ', ' jshint ', ' cssmin ']); 
 Grunt.registertask (' Default ', [' uglify ']); 
 Grunt.registertask (' Default ', [' concat ']); Grunt.regIstertask (' Default ', [' jshint ']); Grunt.registertask (' Default ', [' cssmin ']); 
 The functionality of the Cssmin plug-in is available, and no other function will work.

When the configuration file is ready, the input grunt can be merged and compressed at the command line. The test files above, are basically around, merging and compression, for the Web front-end, this is still more important.
From the compression effect, JS compression effect is more ideal, CSS general, of course, this root write code is related.