首页 / 脚本样式 / JavaScript / 学习使用grunt来打包JavaScript和CSS程序的教程

Java世界里的Maven提供了强大的包依赖管理和构建生命周期管理。在JavaScript的世界里，随着Node.js的流行，JavaScript原生的构建工具已经成为可能。
Grunt.js是基于Node.js的自动化任务运行器。Grunt.js结合NPM的包依赖管理，完全可以媲美Maven。Grunt.js天然适合前端应用程序的构建——不仅限于JavaScript项目，同样可以用于其他语言的应用程序构建。越来越多的JavaScript项目已经在使用Grunt，其中最大的使用者包括著名的jQuery项目。
Grunt的生态系统在迅速的成长，目前已经有上百种插件发布在NPM上可供选择。同时，任何人都可以方便的发布自己的插件到NPM上供其他人使用。
Grunt没有像Maven那样强调构建的生命周期，各种任务的执行顺序可以随意配置。Grunt本身仅是一个执行器，大量的功能都存在于NPM管理的插件中。特别是以grunt-contrib-开头的核心插件，覆盖了大部分的核心功能，比如handlebars，jade，less，compass，jshint，jasmine，clean，concat，minify，copy，uglify，watch，minify，uglify等。
通过提供通用的接口以进行代码规范检验（Lint）、合并、压缩、测试及版本控制等任务，Grunt使入门门槛大大降低了。
一，安装nodejs，grunt,以及grunt插件
1，安装nodejs
下载地址：https://nodejs.org/download/
2，安装grunt，以及插件

npm install grunt -g//安装grunt,-g全局变量 npm install grunt-cli -g //安装grunt命令行 npm install grunt --save-dev//安装grunt,--save-dev保存到安装目录 npm install grunt-cli --save-dev //安装grunt命令行 npm install grunt-contrib-jshint --save-dev //js语法检测插件 npm install grunt-contrib-concat --save-dev //js合并插件 npm install grunt-contrib-uglify --save-dev //js压缩插件 npm install grunt-contrib-cssmin --save-dev //CSS压缩插件 

grunt和grunt-cli，-g和--save-dev都安装一下，建议这样，省得出错。
3，创建工作目录
当上面的安装都结束后，node_modules里面就包含了上面安装的插件，将nodejs安装目录中的node_modules，copy到新的目录中，并创建Gruntfile.js，package.json，
在这里要注意一点，Gruntfile.js，package.json一定要与这个node_modules同一目录下，不然在调用grunt插件的时候会报错的，例如：

>> Local Npm module "grunt-contrib-uglify" not found. Is it installed?Warning: Task "uglify" not found. Use --force to continue.

如果你没有装grunt-contrib-uglify插件，也会报这个错误。
二，创建Gruntfile.js和package.json
1，package.json

{"name": "jstest","file": "function","version": "0.1.0","devDependencies": {"grunt": "~0.4.5","grunt-contrib-jshint": "~0.11.3", //后面的数字是版本号，从各个插件目录下的package.json能找到"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配置grunt.initConfig（{pkg: grunt.file.readJSON（"package.json"）,concat: { options: { separator: ";" }, dist: { src: ["js_s/function.js", "js_s/jquery.validate.js"], dest: "js_d/main.js" //合并不压缩 }},uglify: { options: { banner: "/*！ <%= pkg.name %> <%= grunt.template.today（"yyyy-mm-dd"） %> */
" //文件顶部的注释，可自定义 }, build: { //将package.json中的file对应的文件，进行压缩并重命名 src: "js_s/<%= pkg.file %>.js",//注意空格，官方配置例子是pkg.name dest: "js_d/<%= pkg.file %>.min.js" //注意空格，官方配置例子是pkg.name }, buildall: {//将js_s文件夹下的所有js文件，压缩后，放到js_d文件夹中，文件名不变 files: [{ expand:true, cwd:"js_s",//js目录下 src:"**/*.js",//所有js文件 dest: "js_d"//输出到此目录下 }] }, hebin: {//将function.js和jquery.validate.js，合并,并压缩成main.min.js files: {"js_d/main.min.js": ["js_s/function.js", "js_s/jquery.validate.js"] } }, ymain: {//将main.js压缩成main1.min.js src: "js_d/main.js", dest: "js_d/main1.min.js" }},jshint: { //检查，function.js是不是有语法错误 all: ["js_s/function.js"]},cssmin: { combine: { files: { //将css_s文件夹下的css文件合成一个"css_d/main.css": ["css_s/*.css"] }}, minify: { options: {keepSpecialComments: 0, /* 删除所有注释 */banner: "/* minified css file */" }, files: { //单个CSS文件压缩"css_d/index.min.css": ["css_s/index.css"] }}, test: {//按文件夹下的所有CSS文件，压缩后，放到新的文件夹中，文件名不变 files: [{expand:true,cwd:"css_s",//css目录下src:"**/*.css",//所有css文件dest: "css_d"//输出到此目录下}]} }}）;// 加载插件grunt.loadNpmTasks（"grunt-contrib-uglify"）;grunt.loadNpmTasks（"grunt-contrib-concat"）;grunt.loadNpmTasks（"grunt-contrib-jshint"）;grunt.loadNpmTasks（"grunt-contrib-cssmin"）; // 是否调用插件功能//grunt.registerTask（"default", ["concat","uglify","jshint","cssmin"]）;// grunt.registerTask（"default", ["uglify"]）;// grunt.registerTask（"default", ["concat"]）;//grunt.registerTask（"default", ["jshint"]）;grunt.registerTask（"default", ["cssmin"]）; //CSSMIN插件的功能能用，其他功能都不起作用 } 

配置文件好了以后，在命令行下，输入grunt就可以合并压缩了。上面的测试文件，基本上都是围绕着，合并与压缩来的，对于做WEB前端的来说，这个还是比较重要的。
从压缩效果来说，JS的压缩效果比较理想，CSS一般，当然，这根写的代码有关系。