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

標籤：blog   http   color   io   檔案   ar   2014   問題   

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

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