Simple use of the grunt tool to combine compression JS and CSS

Some time ago because the report in the project wrote a jquery plugin, open source to GitHub, referring to the previous great God's written plug-in posture, decided to engage in a smarty pants point. Anyway Front-end engineers should be familiar with these tools: NODE,BOWER,GRUNT,NPM these tools. Let's briefly introduce the usage of grunt today.

Grunt Introduction and installation Please look at: getting-started, Chinese documents, written also more detailed.

A full Grunt project small contains the following modules or configuration files

• Npm:node Package Manager, manage (install) related plugins
• GRUNT-CLI: A tool to perform grunt tasks, but note that installing GRUNT-CLI does not mean that grunt is installed because grunt is specifically included in the project, NPM will automatically download the plugin information in the Package.json to the Grunt project directory, usually included in the Node_modules directory.
• Package.json: Plugin and project configuration information file.
• Gruntfile.js the definition configuration file for the grunt task.

Define a simple gruntfile.js:

Module.exports =function(Grunt) {grunt.initconfig ({//read information from a custom JSON configuration file to make it easier to refer to it laterPkg:grunt.file.readJSON ("Example.jquery.json"),        //referring to the information read above to define a copyright information header, in fact, is to use a variable concatenation of a string, after the merger compression can use this copyright informationmeta: {banner:"/*\n" + "* <%= Pkg.title | | Pkg.name%>-v<%= pkg.version%>\n "+" * <%= pkg.description%>\n "+" * <%= P  Kg.homepage%>\n "+" *\n "+" * made by <%= pkg.author.name%>\n "+" * under <%= pkg.licenses[0].type%> license\n "+" */\n "        },        //define a Merge JS task, but there is only one JS file, just a simple copy and add the copyright information Headerconcat: {dist: {src: ["Src/jquery.example.js"], dest:"Dist/jquery.example.js"}, Options: {banner:"<%= Meta.banner%>"            }        },        //defines a task for a JS grammar checkJshint: {files: ["Src/jquery.example.js"], Options: {jshintrc:". Jshintrc"            }        },        //define a compression JS task and add the copyright information in the headeruglify: {my_target: {src: ["Dist/jquery.example.js"], dest:"Dist/jquery.example.min.js"}, Options: {banner:"<%= Meta.banner%>"            }        },    }); //load (Grunt)Require (' Load-grunt-tasks ') (grunt); //registering a task, primarily executing grunt in a more directory to perform the taskGrunt.registertask ("Default", ["Jshint", "concat", "uglify"]);};

Then execute the following command:

Install Grunt

Simple use of the grunt tool to combine compression JS and CSS