webstorm和node配合使用的一些小技巧之External tools

webstorm和nodejs都是神器，只是我一直都沒有發掘出來他們的厲害之處

要說webstrom和node的配合使用不得不說一下平時的工做流程這裏以css爲例

1. 根據頁面劃分功能模塊

2. 根據模塊寫less或者修改less

3. 編譯less爲css

4. 壓縮css並上傳

都說前端是網頁設計，其實寫css也能夠很「面向對象」或者說「面向結構」

• 從最先的web頁面開始時，樣式是寫在HTML裏面的，後來把css和js拿了出來(model,view,control。所謂的表現、樣式、控制分離)。

• 再後來css修改維護時若是修改一些參數，或者css樣式不少時，結構很混亂，維護很麻煩，因而有了less等一衆CSS預處理語言(less的一個好處就是可讓css的結構很清晰)。

• 再加上如今模塊化那麼流行，還要強調重用性，因此模塊裏面還要再去套用模塊。

因而文件結構變成了下面這樣

最外層是單個頁面或主模塊的less， 裏面是某一個插件(swiper)的less或者某個動畫(animate)效果的less

文件結構已經好了，而後呢？接下來就須要配合webstorm使用了

前提條件：安裝nodejs,安裝less,安裝less-plugin-clean-css，安裝webstorm

打開webstorm-->File-->Setting-->Tools-->External tools(能夠直接搜索)

以下圖：點擊加號-->填入命令的名字，選擇命令所屬分組（能夠輸入建立，我這裏的是css）,而後進行工具設定

我這裏要設定的是一條less的編譯並壓縮的命令（相似下面這條）

lessc --plugin=less-plugin-clean-css a.less a.min.css

左下角方框第一行是命令文件地址

C:\Users\Administrator\AppData\Roaming\npm\lessc.cmd 
（這是我電腦的地址，找不到文件能夠在電腦上全局搜索lessc.md）

左下角方框第二行是執行的命令

--plugin=less-plugin-clean-css $ProjectFileDir$\$FileDirRelativeToProjectRoot$\$FileName$   $ProjectFileDir$\$FileDirRelativeToProjectRoot$\$FileNameWithoutAllExtensions$.min.css

（中間那些$看不懂的點右下角方框對應的按鈕，對着選項點幾下你就明白是什麼意思了,不懂英文也不要緊）
我這裏命令的意思是直接壓縮並編譯less到對應的項目文件夾，後綴名是.min.css

左下角方框第三行是命令工做目錄，通常選擇第一個時會自動選中

$FileDir$

操做完畢後點擊OK保存

而後去設置一下這個命令的快捷鍵個人爲：ALT+X

接下來就能夠在webstorm裏面很方便的使用這條命令了

最後，若是隻是這麼一條命令也就算了，你有沒有想過加入其它命令呢？

好比： 加入node,直接跑express服務器deng，

加入cmd，執行bat腳本提交git倉庫，

或者一些其它工具等等，

是否是瞬間感受逼格滿滿，很期待呢？趕忙去嘗試吧！