[less]用webstorm自動編譯less產出css和sourcemap

css產出sourcemap有什麼用呢，可能你們要問這個問題了。

請移步這裏

https://developers.google.com/chrome-developer-tools/docs/css-preprocessors?hl=zh-CN

在chrome中咱們經過sourcemap能夠直接調試less源文件文件，這是一個很是強大的功能。

 

下面由我爲你們道來

 

1.在chrome中開啓dev工具，開啓允許CSS source maps設置

2.webstorm中只要建立了less擴展名的文件，就會有提示只要你贊成就會建立一個firewatchers任務，可是這個默認的任務只能編譯出css。咱們須要對這個任務進行一些小小的修改，以便能達到產出sourcemap。

 

原版配置

改造後的配置

 

 

3.對Arguments 和Output paths to refresh這兩項進行了修改

Arguments

--no-color --source-map=$FileNameWithoutExtension$.css.map $FileName$ 

Output paths to refresh

$FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map

　　

這樣就可以既產出.css文件又能產出.map文件了

 

產出的對應的map文件爲

{"version":3,"sources":["app.less"],"names":[],"mappings":"AAAG;EACF,YAAA;;AAEE;EACA,aAAA;;AAEE;EACJ,UAAA;EACA,eAAA;EACA,iBAAA"}

是否是很棒呢，通過簡單設置就能夠快樂開發了！

4.修改命令的依據是

 lessc app.less app.css --source-map=app.css.map

 

 

 

環境

webstorm	less	nodejs
7.0.3（js最好的IDE非廣告）	1.5+（這個版本纔有sourcemap）	必須