前端开发中我们经常需要压缩CSS和JS文件，一方面是为了减小文件体积，加快文件传输，另一方面压缩后的文件可读性很差，起到对源码的保护作用。
目录
一、JS文件压缩、混淆
1.1 原理
我们在使用jQuery时，jquery.min.js就是jquery.js的压缩、混淆版。
压缩：删除 JS 代码中注释、tab、换行符及无用的空格，从而压缩 JS 文件大小。
混淆：经过编码将变量和函数原命名改为毫无意义的命名，以防止他人窥视和窃取 Javascript 源代码。
通常我们对于变量名、函数名等会用比较直观的带有语义的方式命名，例如
| var username = “anspoon”; |
但是
| var a = “anspoon”; |
对于计算机来说是一样的。
深度压缩JS文件就是指尽量缩短变量名，因为变量名在文件中占的体积不算小。所以我们在压缩文件中经常看见a,b,c,d这样的变量名或者函数名。甚至不同作用域下的的变量名还有重复的，因为这也是JS语法允许的，是它的特性之一。
1.2 压缩时需注意
- 代码格式要尽量规范。JS允许在每一行语句结束后不加分号，但是为了压缩时减少错误发生，最好还是规范地加上分号，虽然目前压缩工具已经比较智能。
- 备份好源文件。首先，可能在源文件的基础上再次开发；其次，一次压缩不一定会成功。
1.3 压缩/格式化工具
必须明确的是：仅仅是简单压缩过的是可逆的；若是混淆过的，一般不可逆。
1.在线版
很多，比如：
Google的在线版本 Javascript Closure Compiler
2.离线版
Google的下载版本 Javascript Closure Compiler
3.前端自动化构建
gulp(见文章最后)
二、CSS文件压缩
虽然可能我们在目前的开发中还未涉及到的压缩CSS文件的需求，但是我们在基于Bootstrap开发时，经常会看见一个bootstrap.css和一个bootstrap.min.css。而后者就是压缩后的文件。
对于CSS文件压缩的原理：
- 去换行符
- 去空格
- 去tab
- 去注释（这个不一定）
对于CSS文件没有混淆一说，因为css中的选择器是不可更改的，所以css文件可缩小的体积很小。
1.在线版
很多，比如：
2.前端自动化构建
gulp(见文章最后)
三、使用Gulp压缩文件
Gulp本身不提供css、js文件压缩功能，需要使用相关插件。
- css压缩 gulp-minify-css
- js压缩 gulp-uglify
- js压缩前代码检测 gulp-jshint(或者gulp-jslint)
- 重命名文件 gulp-rename
| npm install –save-dev gulp-minify-css gulp-uglify gulp-jshint gulp-rename |
gulpfile.js
var gulp = require('gulp'),
minifycss = require('gulp-minify-css'),
concat = require('gulp-concat'),
uglify = require('gulp-uglify'),
rename = require('gulp-rename'),
jshint = require('gulp-jshint');
//语法检查
gulp.task('jshint', function() {
return gulp.src('./src/js/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'));
});
//压缩css
gulp.task('minifycss', function() {
return gulp.src('./src/css/*.css') //需要操作的文件
.pipe(rename({ suffix: '.min' })) //rename压缩后的文件名
.pipe(minifycss()) //执行压缩
.pipe(gulp.dest('dist/css')); //输出文件夹
});
//压缩，合并 js
gulp.task('minifyjs', function() {
return gulp.src('./src/js/*.js') //需要操作的文件
.pipe(concat('main.js')) //合并所有js到main.js
.pipe(gulp.dest('dist/js')) //输出到文件夹
.pipe(rename({ suffix: '.min' })) //rename压缩后的文件名
.pipe(uglify()) //压缩
.pipe(gulp.dest('dist/js')); //输出
}); //默认命令，在cmd中输入gulp后，执行的就是这个任务(压缩js需要在检查js之后操作)
gulp.task('default', ['jshint'], function() {
gulp.start('minifycss', 'minifyjs');
});参考：
