最近一段时间，在做一个很古老的项目，简直是上古时期的写作方式了。

还是那些传统的方式，一个页面从上到下引入几十个「js」文件，里面到处充斥着 jquery 的 DOM 操作，维护起来相当的糟糕，变量与函数之间跨文件引用。

<script src="js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/url.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.cookie.js" type="text/javascript" charset="utf-8"></script>
<script src="offlinemap/map_load.js"></script>
<script src="js/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-ui-datepicker.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-ui-timepicker-addon.js" type="text/javascript" charset="utf-8"></script>
<script src="js/dtree.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.ui.touch.punch.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/echarts.common.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/common.js" type="text/javascript" charset="utf-8"></script>
<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.ztree.core.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.ztree.excheck.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.ztree.exedit.js" type="text/javascript" charset="utf-8"></script>
复制代码

虽然很难，但是经过一段时间的努力吧，算是有个稳定的版本了，所以在上线之前呢，我们是需要把代码给压缩混淆一下，一来是减少文件的体积，二来是去掉源码的可读性。

接下来，我们就直接进入主题，废话不多少，如何利用 gulp 去做代码的压缩与混淆。

至于 gulp 是什么我就不做过多的解释了，它是一个自动化的构建工具。

安装

全局安装 gulp

npm install --global gulp
复制代码

作为项目的依赖安装

npm install --save-dev gulp
复制代码

创建文件

在项目的根目录下，创建名为 gulpfile.js 的文件

var gulp = require('gulp');gulp.task('default', function() {//需要处理的任务
});
复制代码

运行

gulp taskname
复制代码

压缩html

//压缩html
gulp.task("minhtml", function () {gulp.src("./src/*.html").pipe(htmlmin({collapseWhitespace: true, //去空格removeComments: true //去注释})).pipe(gulp.dest("./dist"))
});
复制代码

压缩css

//压缩css
gulp.task("mincss", function () {gulp.src("./src/*.css").pipe(cssmin()).pipe(gulp.dest("./dist/css"));
});
复制代码

压缩混淆js

//压缩js
gulp.task("minjs", function () {return gulp.src("./src/js/*.js").pipe(uglify()).pipe(gulp.dest("./dist/js")
});
复制代码

以上，就可以愉快的一键压缩我们的代码了，当然项目中肯定不止这么简单的需求，还有更多更玩的，大家可以根据自己的需求定制一些个性话东西。