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


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

npm install less-plugin-clean-css

【注:】可能遇到的問題

解決方案:在E:\Program Files\nodejs\node_modules\npm進行安裝

 

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…】可以添加更多的宏值


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM