记一次 bug:gulp-uglify 在没有报错的情况下却没有压缩并输出部分文件夹里的 js 文件

前言

layuiAdmin pro 使用 gulp 构建源码时, controller 里的大部分文件夹里的 js 代码没有压缩输出,但也未报错。

问题详述

  1. src/controller 目录结构如图:
    src 里 controller 目录结构
  2. 执行 gulp 构建源码命令后的 dist/controller 目录结构如图,明显少了一些文件夹。
    执行 gulp 命令后的 dist 下的 controller 目录结构
  3. gulpfile.js 中调用 gulp-uglify 压缩 js 的代码如图:
    gulpfile.js 中压缩 js 的部分代码截图
  4. cmd 命令行中 gulp 命令执行结果截图:
    cmd 命令行执行 gulp 命令后的结果

原因排查

排查过程
  1. 依据 layuiAdmin pro 文档,确认了 node 及 npm 没有问题,gulp 已全局安装,其依赖也已安装。

  2. 确认 layuiAdmin pro 中的 gulpfile.js 代码除了引入 babel 增加处理 ES6 的代码外,没有改变。

  3. 确认语法及 API 问题,经查阅资料:
    3.1 gulp.src() 中的路径 './src/**/*.js' 没有错误,就是查找 src 下任意文件夹里的 js 文件。
    3.2 gulp.dest() 中文件输出路径没问题。
    3.3 uglify() 调用没有问题。
    3.4 gulp 引入等没有问题。

  4. 尝试升级 gulp-uglify 至最新版 3.0.2 没有作用。
    gulp-uglify 最新版本

  5. 依据 layuiAdmin pro 文档,确认是否由框架的缓存机制引起?虽然很可能应该无关,囧… 结论是没有用,无关缓存机制的事情。
    start/index.html 中修改版本

  6. 尝试压缩某个具体文件 './src/controller/businessBasic/blackAndWhite/blackAndWhite.js', 也是无效。但是事情终于有了转机。
    dist 结果中没被压缩输出

终于找到问题所在
  1. 点开这个未被压缩输出的文件发现是有语法错误,而问题仅仅是在 js 文件中使用了 html 的注释语法,继而导致文件没有被 gulp-uglify 正常压缩和输出。错误如图:
    注释的错误
  2. 修正注释语法的错误后,终于可以正常压缩输出 js 文件了。
    right result

错误原因分析

项目前端代码由后端同事兼职编写,后端同事对于前端技术不够熟悉,以至于使用了错误的注释语法,最终导致 js 文件没有被正确压缩输出。并且后端同事多使用 webstorm IDE,而 webstorm 没有提示注释语法错误。相反 vs code 有提示注释语法错误。
webstorm
vs code

结语

有时候低级的错误反而难以查找,就像功夫再高也怕菜刀乱拳打死老师傅。相信专业的人做专业的事情,避免低级错误。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值