原文地址：http://xiaomiya.iteye.com/blog/2177877
使用grunt来压缩前端js，css文件
因为最近做的客户端本地项目有用到十几个js，js提交之前都需要压缩。用grunt压缩已经不是什么新鲜事了，，之前的项目用的是别人给我配置好的。所以也没有去深究。这次类型不同了不需要去上传只需文件压缩。所以下午自己去研究了下grunt确实很好用。
我们这里需要对js和css单独压缩。网上很多都是合并压缩。本人觉得多个js合并之后会存在隐形问题。还是喜欢单独压缩。下面的介绍就只做多个文件单独压缩。
一，什么是grunt，
grunt是一套前端自动化工具，一个基于nodeJs的命令行工具，一般用于：
① 压缩文件
② 合并文件
③ 简单语法检查
对于其他用法，我还不太清楚，我们这里简单介绍下grunt的压缩、合并文件
二，准备阶段
1，nodejs环境
因为grunt是基于nodeJs的，所以首先各位需要安装nodeJS环境
安装nodejs。
安装好之后检查
打开cmd
输入：node -v
输出：v0.10.28(这个是我的版本)
三，安装grunt
有了nodeJs环境后，我们便可以开始搞grunt了，因为我们可能在任何目录下运行打包程序，所以我们需要安装CLI官方推荐在全局安装CLI（grunt的命令行接口）
输入：npm install -g grunt-cli
这条命令将会把grunt命令植入系统路径，这样就能在任意目录运行他，原因是
每次运行grunt时，它都会使用node的require查找本地是否安装grunt，如果找到CLI便加载这个本地grunt库然后应用我们项目中的GruntFile配置，并执行任务
ps这里安装好后一般在我们的C:\Users\SOS\AppData\Roaming\npm\node_modules
会看到grunt-cli文件
四，添加package.json和Gruntfile.js文件
package.json
代码如下：
{
"name": "test",
"version": "0.1.0",
"description": "test",
"license": "MIT",
"devDependencies": {
"grunt": "~0.4.1",
"grunt-contrib-jshint": "~0.6.3",
"grunt-contrib-concat": "~0.3.0",
"grunt-contrib-uglify": "~0.2.1",
"grunt-contrib-requirejs": "~0.4.1",
"grunt-contrib-copy": "~0.4.1",
"grunt-contrib-clean": "~0.5.0",
"grunt-strip": "~0.2.1"
},
"dependencies": {
"express": "3.x"
}
}
Gruntfile.js
代码如下：
module.exports = function (grunt) {
// 构建任务配置
grunt.initConfig({
//读取package.json的内容，形成个json数据
pkg: grunt.file.readJSON('package.json'),
//压缩js
uglify: {
//文件头部输出信息
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
},
my_target: {
files: [
{
expand: true,
//相对路径
cwd: 'js/',
src: '*.js',
dest: 'dest/js/',
rename: function (dest, src) {
var folder = src.substring(0, src.lastIndexOf('/'));
var filename = src.substring(src.lastIndexOf('/'), src.length);
// var filename=src;
filename = filename.substring(0, filename.lastIndexOf('.'));
var fileresult=dest + folder + filename + '.min.js';
grunt.log.writeln("现处理文件："+src+" 处理后文件："+fileresult);
return fileresult;
//return filename + '.min.js';
}
}
]
}
},
//压缩css
cssmin: {
//文件头部输出信息
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n',
//美化代码
beautify: {
//中文ascii化，非常有用！防止中文乱码的神配置
ascii_only: true
}
},
my_target: {
files: [
{
expand: true,
//相对路径
cwd: 'css/',
src: '*.css',
dest: 'dest/css/',
rename: function (dest, src) {
var folder = src.substring(0, src.lastIndexOf('/'));
var filename = src.substring(src.lastIndexOf('/'), src.length);
// var filename=src;
filename = filename.substring(0, filename.lastIndexOf('.'));
var fileresult=dest + folder + filename + '.min.css';
grunt.log.writeln("现处理文件："+src+" 处理后文件："+fileresult);
return fileresult;
//return filename + '.min.js';
}
}
]
}
}
});
// 加载指定插件任务
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-cssmin');
// 默认执行的任务
grunt.registerTask('default', ['uglify', 'cssmin']);
};
这个里面主要对 js 和 css 进行批量压缩
会依赖 grunt-contrib-uglify 和 grunt-contrib-cssmin 这两个插件
做好后，我们需要在我们的项目的根目录下运行命令
输入： npm install
会将相关的文件下载下来
这个时候我们的根目录下就会多个文件名字叫 node_modules
这一步我们就可以压缩
进入根目录输入命令 grunt 回车就 ok
这个时候如果输出有报错可能说：“ grunt-contrib-cssmin”notfound
那我们要把 grunt-contrib-cssmin 插件下载下来
输入命令： npm install grunt-contrib-cssmin
OK
这个时候如果输出有报错可能说： Fatal error :Unable to find local grunt
或者找不到 grunt 的错误
那我们可以重新安装 grunt
把 C:\Users\SOS\AppData\Roaming\npm\node_modules 下面的 grunt-cli 文件删除。。重新执行
npm install -g grunt-cli
那么最后我们就只用输入 grunt 回车
看到输出的内容就知道 OK 不 OK 了
运行 OK 后，我们的目录里面多了一个文件 dest 里面的有 css 和 js 文件都是多个文件单独的压缩
这就省了我们手动去逐一压缩的苦恼了。
对于 grunt 是如何工作的深入理解就可以看 grunt 官网了