webstorm下搭建編譯less環境 以及設置壓縮css

webstorm自帶less,不過要編譯的話需要nodejs環境。

  1. 首先去node的主頁下載對應版本的nodejs然後安裝,下載地址:http://nodejs.org/
  2. 安裝完之後打開命令提示符(win+r),分別輸入node -v以及npm -v如果返回版本號說明你安裝成功了。
  3. 接下來就可以安裝less了,命令提示符npm進入npm管理器,然後npm install less開始下載less,默認安裝目錄在用戶名\node_modules這裏面。
  4. 到這裏less安裝完畢了,接下來配置webstorm。
  5. 打開webstorm的file->settings ->External Tools,點擊左上角的“加號”標誌add,進入對話框

  6. program裏設置的是lessc的路徑,這裏的目錄可以參考截圖中紅框中的目錄,他會默認編譯到根目錄。例如:/Users/xx/node_modules/less/bin/lessc
  7. 如果你想順便壓縮編譯後的css,除了在Arguments中寫入--plugin=less-plugin-clean-css外還要安裝壓縮插件:sudo npm install -g less-plugin-clean-css,這裏要注意我安裝的路徑,如果最後less-plugin-clean-css的路徑和上邊的/Users/xx/node_modules/less不一個路徑的話也跑步起來,這樣怎麼解決呢,可以直接將clean-css路徑中的less-plugin-clean-css文件夾copy到/Users/xx/node_modules/中搞定
  8. 然後你可以爲這個編譯器指定一個快捷鍵,我使用的是ALT + B
  9. 之後打開一個.less後綴名的文件,快捷鍵編譯,如果webstorm底部狀態控制器顯示 Process finished with exit code 0 ,那麼恭喜你,大功告成!
發佈了63 篇原創文章 · 獲贊 16 · 訪問量 37萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章