在WebStorm里配置watcher實現編輯less文件時自動生成.map和壓縮后的.css文件

2024-04-27 15:06:47

字體：大中小

來源：轉載

供稿：網友

前言

WebStorm是一款非常優秀的Web前端IDE工具，本文主要介紹，如何在其Watcher中進行配置，實現編輯less文件時自動生成.map和壓縮后的.CSS文件。筆者WebStorm版本為2016.1.1。

開始動手

1.操作前確定成功安裝less，檢測方法，在命令行（cmd）,輸入lessc -v，看到如下類似內容，則說明安裝過了。這里寫圖片描述如果需要生成壓縮后的css的文件，則需要通過以下命令安裝插件，詳見《安裝Nodejs、npm、Less（支持生成壓縮后的css）》

npm install less-plugin-clean-css

2.打開WebStrom，隨便新建一個工程，在工程名上右鍵，【新建】-【Stylesheet】,輸入文件名，Kind值選擇Less File,【確定】，會自動提示是否將less加入watcher，點擊【Add watcher】, 這里寫圖片描述打開New Watcher配置界面，如果沒有提示，也可以通過【文件(File)】-【設置(Settings)】-【工具(Tools)】-【File Watchers】-【+】-【Less】打開New Watcher配置界面。 3.此時，如果直接點擊【確定】，則當我們修改less文件時，會自動生成相應的css文件，當然我們為了讓其功能更強大，生成壓縮后的css和相應的map文件，就需要修改Arguments和Output paths to refresh兩個參數（注意PRogram值是自動獲取的，每個人電腦環境不同，路徑類似）。按照下面的表中值進行配置，完成相應的功能。 修改前

參數名	參數值(下面no之前是兩個“-”)
Arguments	–no-color $FileName$
Output paths to refresh	$FileNameWithoutExtension$.css

修改后（不啟用css壓縮）

參數名	參數值(下面no和source之前是兩個“-”)
Arguments	–no-color $FileName$ $FileNameWithoutExtension$.css –source-map=$FileNameWithoutExtension$.css.map
Output paths to refresh	留空

修改后（啟用css壓縮，需要給less安裝插件less-plugin-clean-css，詳見《安裝Nodejs、npm、Less（支持生成壓縮后的css）》）

參數名	參數值(下面no、clean和source之前是兩個“-”)
Arguments	–no-color $FileName$ $FileNameWithoutExtension$.min.css –clean-css –source-map=$FileNameWithoutExtension$.min.css.map
Output paths to refresh	留空

修改后點擊【確定】保存，回到less文件編輯界面，隨意輸入css代碼，立即會生成css和map文件。這里寫圖片描述 Arguments里還可添加其他參數實現更多的功能，點擊后面的【Insert maro…】可以添加更多的宏值。