继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

如何利用 gulp 压缩混淆 “上古”时期的项目文件

六小登登
关注TA
已关注
手记 39
粉丝 3975
获赞 1285

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

还是那些传统的方式,一个页面从上到下引入几十个「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")
});

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

打开App,阅读手记
1人推荐
发表评论
随时随地看视频慕课网APP