WebStorm压缩CSS

我们在编写代码时，总会有很多空格、注释或全名变量(引用)，这些对于浏览器加载来说是没什么意义的，反而会降低加载速度；而压缩静态文件就是减少这些无必要的以减少文件大小。

我在网上搜罗了一下，发现大部分人都是用yui compressor这个插件在Webstorm进行压缩css文件或其他静态文件，然后我发现Webstorm官网上是使用CSSO这个插件的，因此我选择了跟随官方文档。

安装准备

• nodejs - CSSO这个插件是依赖于nodejs的

• 两个webstorm插件：CSS和file watcher - 这两个插件一般都会自带

进行安装

1. 打开(快捷键 macOS：⌥ F12，Windows：Alt+F12)打开终端，安装 csso-cli

   npm install -g csso-cli
   

2. 安装完成后在Preferences -> Tools -> FileWatchers中新建一个CSSO CSS Optimizer

   

3. 配置

   我基本就是默认配置。。其他配置可以到jetbrains的官方文档file watcher进行查阅。

   

   这个自动打上勾:

   

   • Scope: 插件作用范围

   • Program: 默认是csso，因为安装了csso-cli，所以会自动定位改包的位置。

   • Arguments: 默认，其他依旧可参照项目

Reference：

• jetbrains

• csso