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

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

請移步這裏html

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

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

 

下面由我爲你們道來chrome

 

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

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

 

原版配置webstorm

改造後的配置工具

 

 

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

Arguments

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

Output paths to refresh

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

  

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

 

產出的對應的map文件爲

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

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

4.修改命令的依據是

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

 

 

 

環境

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

轉自:http://www.cnblogs.com/enix/p/3505610.html

相關文章
相關標籤/搜索