前言：
以现在前端js激增的态势，一个项目下来几十个js文件轻轻松松
对于复杂一点的单页应用来说，文件上百简直是家常便饭，那么这个时候我们的js文件应该怎么处理呢？另外，对于css文件，又该如何处理呢？？
这些都是我们实际工作中遇到的问题，对于页面的优化，减少http请求特别重要；
Grunt干什么的？
是一套前端自动化工具，一个基于nodeJs的命令行工具，一般用于：
① 压缩文件② 合并文件③ 简单语法检查
grunt 有很多用处，这里只简单介绍下我知道的文件压缩，合并，初学，多指教，写出来提高记忆！
准备阶段：
1，安装nodeJs环境
因为grunt是基于nodeJs的，所以要首先安装nodejs环境，nodejs 可以到官网上下载安装 ，傻瓜式的安装很简单
2，安装grunt
有了nodejs环境以后，我们便可以开始安装grunt了，因为我们有可能在任何目录下运行打包程序，所以我们安装CLI,官方推在全局安装CLI(grunt的命令接口)；
打开nodej的命令窗口输入以下命令进行安装grunt：
npm install -g grunt-cli
实战学习
在用grunt例子之前，先建立一个grunt文件夹，在里面增加两个文件
package.json
{ "name": "grunt-study", "version": "1.0.0", "description": "study", "main": "index.js", "scripts": { "test": "test" }, "repository": { "type": "git", "url": "https://github.com/hubcarl" }, "devDependencies":{ "matchdep": "latest", "shelljs": "latest", "ngmshell": "latest", "grunt": "latest", "grunt-contrib-clean": "latest", "grunt-contrib-concat": "latest", "grunt-contrib-copy": "latest", "grunt-contrib-connect": "latest", "grunt-contrib-htmlmin": "latest", "grunt-contrib-cssmin": "latest", "grunt-contrib-imagemin": "latest", "grunt-contrib-uglify": "latest", "grunt-contrib-watch": "latest", "grunt-usemin": "latest", "connect-livereload": "latest" }, "keywords": [ "grunt" ], "author": "bluesky", "license": "BSD-2-Clause", "bugs": { "url": "https://github.com/hubcarl" }} Gruntflie.js
module.exports = function (grunt) { grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), concat: { options: { }, //合并文件 dist: { src: ['src/style2.css','src/style1.css'],//src文件夹下包括子文件夹下的所有文件 dest: 'dist/built.css'//合并文件在dist下名为built.js的文件 } }, //压缩js uglify: { build: { src: 'dist/built.js',//压缩源文件是之前合并的buildt.js文件 dest: 'dist/built.min.js'//压缩文件为built.min.js } }, //压缩css cssmin: { files: { src: 'dist/built.css',//压缩源文件是之前合并的buildt.js文件 dest: 'dist/built.min.css'//压缩文件为built.min.js } } }); grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-concat'); grunt.loadNpmTasks('grunt-contrib-cssmin'); grunt.registerTask('default', ['concat','uglify','cssmin','imagemin']); } 这里在D：/Node.js/grunt建立项目目录
安装插件
打开命令窗口，在项目目录下运行一下命令：
npm install grunt-contrib-uglify 安装js压缩插件
npm install grunt-contrib-cssmin 安装cssmin
'copy', //复制文件 'concat', //合并文件 'imagemin', //图片压缩 'cssmin', //CSS压缩 'uglify', //JS压缩 'usemin', //HTML处理 'htmlmin' //HTML压缩
在命令窗口在项目目录下运行npm install将相关的文件下载下来：
目录下就多了这些文件,在grunt/src下面放如js或者css文件
然后配置Gruntfile.js 文件
module.exports = function (grunt) { grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), concat: { options: { }, //合并文件 dist: { src: ['src/style2.css','src/style1.css'],//src文件夹下包括子文件夹下的所有文件 dest: 'dist/built.css'//合并文件在dist下名为built.js的文件 } }, //压缩js uglify: { build: { src: 'dist/built.js',//压缩源文件是之前合并的buildt.js文件 dest: 'dist/built.min.js'//压缩文件为built.min.js } }, //压缩css cssmin: { files: { src: 'dist/built.css',//压缩源文件是之前合并的buildt.css文件 dest: 'dist/built.min.css'//压缩文件为built.min.css } } }); grunt.loadNpmTasks('grunt-contrib-uglify'); //压缩js的插件 grunt.loadNpmTasks('grunt-contrib-concat'); //合并文件的插件 grunt.loadNpmTasks('grunt-contrib-cssmin'); //压缩css的插件 grunt.registerTask('default', ['concat','uglify','cssmin','imagemin']); //这里需要把插件的名字写到数组中}
然后修改配置文件 在命令窗口中运行grunt :
在相应的文件夹中得到合并文件和压缩文件；
参考文献：
http://www.cnblogs.com/yexiaochai/p/3594561.html
http://www.k68.org/?p=1232
http://www.cnblogs.com/hubcarl/p/4095122.html
http://www.gruntjs.net/getting-started#grunt