在Webstorm中使用CSS压缩合并工具

WebStorm aisin 发表于 3 年前最后回复来自 qq2850071112 1 年前

项目中CSS的合并压缩, 可以减少请求, 减小文件体积. 这个工作有点繁琐, 手动进行肯定不行, 所以想找一个能和phpstorm(或webstorm)集成的自动或半自动化一键合并压缩的工具.

在网上找了一些工具, 有的是需要php运行环境的, 有的则使用起来比较麻烦. 最后发现了Yabo(嗯, 就是鸭脖)这么一款工具, 功能刚好符合我的需求.

那么Yabo咋用呢? 且接着看:

1. 准备好css:

假设你的首页css分成了3部分: 01reset.css, 02common.css 和 04index.css. 那么此时你可以新建一个index.css, 然后利用import的方式把01, 02 和 04 引进去:

然后你在页面上真正要用的CSS才是index.css.

2. 在phpstorm中配置Yabo:

Setting -> External Tools –> Add

然后作如下配置,

接着在编辑器中右键选择yabo,

此时就会自动生成01reset.css, 02common.css 和 04index.css合并压缩后的index.min.css文件.

可能出现的问题

我在配置Yabo的过程出现了下面这个问题,

股沟了下说是js文件的默认打开方式没有了. 解决办法如下:

打开注册表编辑器,定位”HKEY_CLASSES_ROOT” > “.js” 这一项,双击默认值将数值数据改为”JSFile”即可,具体如下图:

共收到7条回复
guokai 3 年前 #1

图片被防盗链了,改用微博图床吧。

aisin 3 年前 #2

@guokai 编辑主题的时候, 貌似markdown语法不支持了啊, 图片和链接都错乱了

guokai 3 年前 #3

@aisin 支持的,可能是你插入新浪图床图片时候也用了img标签,插入新浪图床图片只需要粘贴链接就行了。我后续会修复使用img标签显示异常这个问题。

aisin 3 年前 #4

@guokai 哦 原来如此, 我说呢. 呵呵 现在格式整好了

aisin 3 年前 #5

@guokai 修改了好多好多次, 然后发现我的 威望值 掉了一地. 哈哈

guokai 3 年前 #6

@aisin 😊 现在的威望值计算有不合理的地方,我最近也一直在想,试图找到更准确衡量成员贡献和影响力的算法。

aisin 3 年前 #7

@guokai 期待改进和更新 :). 不知道v2ex这方面是咋搞滴

登录后即可参与回复