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

    create-csso.png

  3. 配置

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

    csso-config.png

    这个自动打上勾:

    take-it.png

    • Scope: 插件作用范围

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

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

Reference: