給Webstorm的HTML自動壓縮插件

給Webstorm的HTML自動壓縮插件

前端代碼的壓縮

前端的js、css、html的壓縮不僅會讓網頁加載更快一些，在移動互聯網的今天省流量也成爲了一大好處。

google的Closure就是一個JS壓縮工具（google暫時好像沒有css壓縮工具），還有雅虎的YUI Compressor 它是JS/CSS壓縮工具。它們都是用java寫的工具，用起來就是一行命令，類似於：

java -jar yui.jar --type css --charset utf-8 -o dest.css src.css

就醬紫。

但是用起來我總不能每改一次css、js文件就手動執行一般這個命令吧……很麻煩的。

所以有了jetbrains黑科技公司的IDE就方便很多啦。

Webstorm等系列IDE的File Watchers功能

在settings->File Watchers裏設置。如圖：

File Watchers是一個可以按照文件類型實時監測工程裏的文件變化，並且提供回調接口的功能。比如我可以實時監測CoffeeScript文件變化，並且把它們自動地編譯生成js文件。是不是很方便？

什麼都不用擔心，直接在html裏引用js文件，然後盡情地寫你的CoffeeScript吧。

附帶一下CoffeeScript的File Watchers的配置方式：

那個FileDir 和FileName 指的是各種相對路徑，具體的你可以點擊Insert macro…查看，就不過多說明了（Insert macro…點擊之後有詳細的樣例說明）

YUI Compressor壓縮JS/CSS的配置：

三個紅框的配置分別是：

1. 下載好的jar 的路徑
2. $FileName$ -o $FileNameWithoutExtension$.min.js
3. $FileNameWithoutExtension$.min.js

CSS文件監測的設置同理，把js改成css就行。

HTML壓縮

重點來了，WebStorm好像沒有直接提供HTML文件壓縮的選項，但是有了<custom>的選項我們就可以自己做一個啊。

於是昨天迫於強迫症犯了，css、js都自動壓縮了，html一定也要自動壓縮！所以網上找了個html壓縮的代碼，改了改，加了接口自己做了個插件。

github地址：https://github.com/cyhhao/HtmlCompressor

jar就在* out/artifacts/unnamed/unnamed.jar *路徑，下載下來直接用就好。

用法就是

源文件路徑 -o 生成文件路徑 

目前還很粗糙啦，只有-o命令……只支持utf-8編碼……以後有時間會繼續更新更新的嘛~

WebStorm配置方式：

三個紅框的配置分別是（舉一反三啦~）：

1. 下載好的jar 的路徑
2. $FileName$ -o $FileNameWithoutExtension$.min.html
3. $FileNameWithoutExtension$.min.html

原文來自個人博客：cyhhao的Blog的文章給webstorm的html自動壓縮插件