关于JS和CSS文件压缩问题

前端开发中我们经常需要压缩CSS和JS文件，一方面是为了减小文件体积，加快文件传输，另一方面压缩后的文件可读性很差，起到对源码的保护作用。

一、JS文件压缩、混淆

1.1 原理

我们在使用jQuery时，jquery.min.js就是jquery.js的压缩、混淆版。

压缩：删除 JS 代码中注释、tab、换行符及无用的空格，从而压缩 JS 文件大小。

混淆：经过编码将变量和函数原命名改为毫无意义的命名，以防止他人窥视和窃取 Javascript 源代码。

通常我们对于变量名、函数名等会用比较直观的带有语义的方式命名，例如

var username = "zhangsan";

但是

var a = "zhangsan";

对于计算机来说是一样的。

深度压缩JS文件就是指尽量缩短变量名，因为变量名在文件中占的体积不算小。所以我们在压缩文件中经常看见a,b,c,d这样的变量名或者函数名。甚至不同作用域下的的变量名还有重复的，因为这也是JS语法允许的，是它的特性之一。

1.2 压缩时需注意

代码格式要尽量规范。JS允许在每一行语句结束后不加分号，但是为了压缩时减少错误发生，最好还是规范地加上分号，虽然目前压缩工具已经比较智能。
备份好源文件。首先，可能在源文件的基础上再次开发；其次，一次压缩不一定会成功。

1.3 压缩/格式化工具

必须明确的是：仅仅是简单压缩过的是可逆的；若是混淆过的，一般不可逆。

1.在线版

很多，比如：

JS混淆加密压缩 - 站长工具

雅虎的 YUI Compressor

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.在线版

很多，比如：

Css代码压缩/解压缩格式化 - 站长工具

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');　　
});

参考：

一、JS文件压缩、混淆
二、CSS文件压缩
三、使用Gulp压缩文件