自写脚本实现上线前本地批量压缩混淆 js , css 代码。
最近做项目遇到一个要求,就是把本地的 js 和 css 进行压缩后再上线,由于之前项目并没有使用 webpack 之类的库,项目上也因为一些机密不能在线上压缩,这无疑给代码打包压缩带来了很大麻烦,于是上网搜索了一些代码压缩的方法,最终锁定了第三方插件 yuicompressor-2.4.8.jar,因为后台发开用的语言是 java,代码工具是 IntelliJ IDEA,前端开发使用的代码工具是 WebStorm,而 yuicompressor-2.4.8.jar 两者都可以兼容,所以果断选择。
关于 yuicompressor-2.4.8.jar 的配置网上有很多教程,在这里我借鉴了 https://blog.csdn.net/ke_g3/article/details/84763515 的安装过程,完全可以运行,但是令人遗憾的是这个方法只能处理单个 js 或者 css 文件,对于项目里 js 和 css 比较少的尚且可以接受,但是对于大批量的 js 和 css 文件来说简直是无法忍受,于是就开始了此次 本地批量压缩混淆 js , css 代码 的旅程。
对于将 yuicompressor-2.4.8.jar 作为第三方插件植入 IDEA 或者 WebStorm ,然后运行该插件其实运用了以下这行代码:
java -jar jar存放目录/yuicompressor-2.4.8.jar --type js --charset utf-8 目录/XXX.js -o '.js$:.min.js'
上面的代码就是将一个特定的 js 文件代码压缩,那我们就可以顺藤摸瓜,利用该命令实现一个批量压缩代码的脚本。
直接上代码:
#脚本解释器
#!/bin/bash
#执行方法
function getdir(){
#循环当前目录
for file in `ls $1`
do
#拼接
dir_or_file=$1"/"$file
#判断是目录还是文件
if [ -d $dir_or_file ]
then
#如果是目录递归执行方法
getdir $dir_or_file
else
#如果是文件则进行压缩
compress $dir_or_file
fi
done
}
#执行压缩
function compress(){
#判断 js 文件且不是 min.js , .js 压缩的 min.js 会覆盖原有的 min.js
if [[ $dir_or_file == *.js ]] && [[ $dir_or_file != *.min.js ]]
then
#压缩 js
java -jar /Applications/IntelliJ" "IDEA.app/Contents/lib/yuicompressor-2.4.8.jar --type js --charset utf-8 $dir_or_file -o '.js$:.min.js'
#判断 css 文件且不是 min.css , .css 压缩的 min.css 会覆盖原有的 min.css
elif [[ $dir_or_file == *.css ]] && [[ $dir_or_file != *.min.css ]]
then
#压缩 css
java -jar /Applications/IntelliJ" "IDEA.app/Contents/lib/yuicompressor-2.4.8.jar --type css --charset utf-8 $dir_or_file -o '.css$:.min.css'
fi
}
#先删除带 min 的压缩文件 此处由于可能只有 min.js 而没有它的 js 文件,所以弃用
#rm `find . -name "*.min.js"`
#rm `find . -name "*.min.css"`
#进入目录
root_dir="."
getdir $root_dir
上面的代码说白了就是运行在终端之后将目标目录内的 js 和 css 文件进行查找并进行压缩。由于本人使用的是 mac 做的开发,所以并没有考虑 windows 的执行命令,这个大家都懂的。当然上面的命令是基于 shell 命令写的,可以运行 shell 的也可以使用。使用 windows 的小伙伴代码把上面的代码解释说明一下后可以自己修改一下运行。
1、我们的思路就是先找到需要压缩代码的目录,然后将该目录下的 js 和 css 代码压缩,如果该目录还有目录,那么就递归再次执行压缩操作。
2、首先定义压缩目录 root_dir,在这里我是直接 cd 到压缩目录下执行,所以是 ".",然后执行 getdir() 方法并将 root_dir 参数传入进行目录查找。
3、然后我们对传入的 toot_dir 目录进行循环遍历,对该级目录,即传入的 root_dir = "." 进行判断,如果是目录的话我们再次执行 getdir() 方法进行循环操作,如果是文件的话就进入 compress() 方法,并将该文件作为参数传入。
4、在 compress() 方法里我们先对传入的参数进行判断,如果是以 .js 文件结尾的且不是以 min.js 结尾的,运行
java -jar jar存放目录/yuicompressor-2.4..jar --type js --charset utf- $dir_or_file -o '.js$:.min.js'
这样就可以将 js 文件代码进行压缩了,css 文件同理。
后语:在编写代码进行测试时,自己在本地建了一个 test 目录进行测试,里面放了一些 js 和 css 文件,然后进行第一次代码压缩,当时并没有在 compress() 方法里进行 .min.js 和 .min.css 的判断。然后进行第二次压缩,发现原有的 js 文件压缩的 min.js 会覆盖掉第一次压缩出来 min.js,但是第一次压缩出来的 min.js 也会压缩出来一份 min.min.js,由于向省懒劲就直接在进行压缩之前先删除掉文件内所有的 min.js 和 min.css,拿给项目的人用,结果傻眼了。因为开发人员在之前引入了好多第三方 js 和 css 库,但是引入的只是 min.js 和 min.css,结果删了之后有没有它的没压缩过的文件,整个项目崩溃了,只好再把项目代码回滚了一下,很是尴尬。所以还是不要偷懒,代码逻辑考虑详细点。
最后我们看一下效果:
1、先通过代码编辑器打开一个需要压缩代码的项目,这里我们在 test 目录下又创建了一个 nextDir 目录来做递归压缩检测:
2、在 Terminal 内将文章开头的代码贴入,按下回车键:
最终结果就是在每个 js 和 css 文件下分别创建了各自的压缩代码。
当然我们也可以创建个文件将文章最上面的代码写进去,然后执行该文件来操作会更加方便点。
以上就是这次的代码学习之旅,鉴于本人才疏学浅,能力有限,上面的代码可能有很多缺陷和不足,又是第一次写终端执行脚本,如果问题请各位大神批评指正,在此谢过!
好记性不如烂笔头,特此记录,与君共勉!
自写脚本实现上线前本地批量压缩混淆 js , css 代码。的更多相关文章
- 压缩/批量压缩/合并js文件
写在前面 如果文件少的话,直接去网站转化一下就行. http://tool.oschina.net/jscompress?type=3 1.压缩单个js文件 cnpm install uglify-j ...
- 用node批量压缩html页面
最近在写一个用了layui的后台管理系统.因为某些原因,html,css,js都写在.html里,并且没有用到别的打包工具.所以写了一个用node命令批量压缩页面并且混淆js的小工具.node安装ht ...
- LoadRunner手写脚本、检查点、集合点、事务、思考时间
手写脚本 什么时候要手写? 可以有条件手写脚本的场景有两类: 有接口说明文档 没有借口说明文档,要去录制,录制不了,抓包手写 所需函数 我们这里讲的例子是基于 http 协议的,也是常见的两种请求类型 ...
- CP干货:手机游戏上线前需要准备什么
转自:http://www.gamelook.com.cn/2015/09/229002 游戏研发完成后游戏该怎样推广?如何找渠道?推广时需要注意什么?下面给大家介绍一下具体流程,可能每个公司的上线流 ...
- base64文件隐写脚本
base64文件隐写脚本 base64 可以在文件中隐藏信息,记录一下提取脚本 ''' base64文件隐写脚本 import re import base64 b64chars = 'ABCDEFG ...
- 关于xcode6打包以及上线前企业部署测试的说明 --转自张诚教授微博
xcode6如何打包 首先clean然后点击归档 点击打包之后保存 点选第一个以后检查相关证书签名 那么我们开发完以后,在上线前如何给别人测试 有2种方法 1.使用299美金的企业开发者账号搭建企业部 ...
- Linux 用脚本编写搭建yum本地仓库
Linux 用脚本编写搭建yum本地仓库 源码如下: #!/bin/bash #该脚本用于自动化搭建本地yum仓库 #挂载光盘 #作者:雨中落叶 #博客:https://www.cnblogs.com ...
- 发布上线前,先小秀一把俺的64位浏览器,速度那觉对是杠杠滴,上youtube,上google不费劲
发布上线前,先小秀一把俺的64位浏览器,速度那觉对是杠杠滴,上youtube,上google不费劲
- IOS AppStore上线前测试
IOS AppStore上线前测试 TestFlight Beta ios 8才开始支持. https://developer.apple.com/library/ios/documentation ...
随机推荐
- Centos7 修改硬件时间和系统时间
查看系统时间 [root@localhost ~]# date Tue Jun 13 10:20:13 CST 2017 查看硬件时间 [root@localhost ~]# hwclock --sh ...
- 基于opencv3.0和下的条形码与二维码识别
其中对条码与二维码的识别分为以下4个步骤 1. 利用opencv和Zbar(或者Zxing)对标准的条形码图片(即没有多余背景干扰,且图片没有倾斜)进行解码,将解码信息显示出来,并与原始信息对比. 2 ...
- lookup_peer.go
, fmt.Sprintf("LOOKUP connecting to %s", lp.addr)) conn, err := net.DialTimeout(" ...
- Dubbo中订阅和通知解析
Dubbo中关于服务的订阅和通知主要发生在服务提供方暴露服务的过程和服务消费方初始化时候引用服务的过程中. 2345678910111213141516171819 public <T> ...
- BZOJ_2212_[Poi2011]Tree Rotations_线段树合并
BZOJ_2212_[Poi2011]Tree Rotations_线段树合并 Description Byteasar the gardener is growing a rare tree cal ...
- BZOJ_1251_序列终结者
BZOJ_1251_序列终结者 [问题描述] 给定一个长度为N的序列,每个序列的元素是一个整数(废话).要支持以下三种操作: 1. 将[L,R]这个区间内的所有数加上V. 2. 将[L,R]这个区间翻 ...
- BZOJ_2038_[2009国家集训队]小Z的袜子(hose)_莫队
BZOJ_2038_[2009国家集训队]小Z的袜子(hose)_莫队 Description 作为一个生活散漫的人,小Z每天早上都要耗费很久从一堆五颜六色的袜子中找出一双来穿.终于有一天,小Z再也无 ...
- Python3 ——斐波那契数列(经典)
刚刚学习了 斐波那契数列,整理一下思路,写个博文给未来的学弟学妹参考一下,希望能够帮助到他们 永远爱你们的 ----新宝宝 经历过简单的学习之后,写出一个比较简单的代码,斐波那契数列:具体程序如下: ...
- 【SAP业务模式】之STO(二):系统配置
本篇博文开始讲述STO业务模式的配置! 一.定义发货工厂的装运数据: 目录:SPRO-物料管理-采购-采购订单-设置库存调拨订单-定义工厂的装运数据 定义发货工厂的装运数据: 为收货工厂分配客户代码: ...
- 聚焦“云开发圆桌论坛”,大前端Serverless大佬们释放了这些讯号!
4月14日,由云加社区举办的TVP&腾讯云技术交流日云开发专场,暨"腾讯云-云开发圆桌论坛"在北京.深圳两地同步举行. 当天下午,一场主题为"基于大前端和node ...