IntelliJ IDEA：精簡CSS

精簡CSS

此功能僅在Ultimate版本中受支持。

在開始之前，請確保您的計算機上有Node.js.

YUI Compressor是一種用于精簡CSS代碼的工具?？s小或壓縮意味著刪除所有不必要的字符，例如空格，換行，注釋而不更改源代碼的功能。在開發(fā)和調(diào)試期間，這些字符使代碼更易于閱讀。在生產(chǎn)階段，他們只增加要傳輸?shù)拇a的大小。

安裝和配置YUI Compressor

• 打開嵌入式終端（Alt+F12），然后在命令提示符下鍵入npm install yuicompressor。

壓縮CSS代碼

要動態(tài)壓縮代碼，您需要將壓縮器配置為IntelliJ IDEA 文件監(jiān)視器。

創(chuàng)建文件監(jiān)視器

1. 在“設(shè)置/首選項”對話框（Ctrl+Alt+S）中，單擊“工具”下的“文件監(jiān)視器 ”。打開的“文件監(jiān)視器”頁面顯示已配置的文件監(jiān)視器列表。

2. 單擊或按Alt+Insert ，然后從列表中選擇YUI Compressor CSS預(yù)定義模板。

3. 在“程序”文本框中，指定yuicompressor-<version>.jar文件的路徑。如果您通過節(jié)點包管理器安裝該工具，IntelliJ IDEA將自行定位所需的文件并自動填寫該字段。否則，請手動鍵入路徑，或單擊 并在打開的對話框中選擇文件位置。

4. 按照使用文件監(jiān)視器中的說明繼續(xù)操作。

啟用縮小文件觀察程序時，只要更改或保存文件觀察程序范圍中的CSS文件，就會自動開始縮小 。

IntelliJ IDEA使用生成的輸出創(chuàng)建單獨的文件。該文件具有源CSS文件的名稱和擴展名min.css。生成的文件的位置在“新建觀察器”對話框的“要刷新的輸出路徑”文本框中定義。但是，在項目樹中，默認情況下它顯示在源CSS文件下，該文件現(xiàn)在顯示為節(jié)點。要更改默認表示，請在“項目”工具窗口中配置文件嵌套。