前端集合 - 关注前端技术和互联网免费资源

关注前端技术和互联网免费资源

分类儿

页面儿

搜索儿

订阅儿

前端集合 RSS订阅
Home » 前端集合 » 在项目中小试CSS压缩合并工具

在项目中小试CSS压缩合并工具

发布者:前端集合 // 发布时间:2013-07-12 22:24:48 // 分类:前端集合 // 访问: 2,370 次 // 热度: 0人参与

在现在公司的项目中, css的合并压缩都是由java程序员利用merge文件配置实现的, 我们前端干预不到. 但在自己做的一个较为独立的项目中, java程序员无法在服务器端提供这样一个功能, 所以只能我自己每次把页面交给他们之前将CSS合并压缩下. 已达到减少请求, 减小文件体积的目地. 由于之前一直手动进行的, 所以想找一个能和phpstorm集成的自动或半自动化一键合并压缩的工具.

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

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

1. 准备好css:

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

image

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

2. 在phpstorm中配置Yabo:

Setting -> External Tools –> Add

然后作如下配置,

image

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

image

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

可能出现的问题

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

image

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

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

image

Tags: CSS自动压缩合并工具, CSS自动压缩, CSS自动合并, CSS压缩合并, CSS压缩合并工具

Ubuntu下chrome和Firefox安装使用教程>>  << 如何解除wdcp服务器管理系统中域名长度限制
Top