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

Mr_houzi 發布于2019-08-29 10:55 / 927人閱讀

摘要：所謂的表現樣式控制分離。再后來修改維護時如果修改一些參數，或者樣式很多時，結構很混亂，維護很麻煩，于是有了等一眾預處理語言的一個好處就是可以讓的結構很清晰。再加上現在模塊化那么流行，還要強調重用性，所以模塊里面還要再去套用模塊。

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

要說webstrom和node的配合使用不得不說一下平時的工作流程這里以css為例

根據頁面劃分功能模塊

根據模塊寫less或者修改less

編譯less為css

壓縮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:UsersAdministratorAppDataRoaming
pmlessc.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倉庫，

或者一些其它工具等等，

是不是瞬間感覺逼格滿滿，很期待呢？趕緊去嘗試吧！

GPU云服務器云服務器阿里云服務器怎么和小程序配合使用 node js webstorm ddos一些比較小的網站小技巧

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111308.html

babel6 入門-配置安裝使用_byKL

摘要：入門什么是是一個廣泛使用的轉碼器，可以將代碼轉為代碼，從而在現有環境執行。 babel6 入門什么是babel Babel是一個廣泛使用的轉碼器，可以將ES6代碼轉為ES5代碼，從而在現有環境執行。因為es6比es5的代碼更為適合編寫程序,但是因為歷史的原因,現在普遍的瀏覽器并不支持es6代碼(普遍支持es5),即如果你寫es6代碼之后,在瀏覽器上運行出錯,因為瀏覽器的javas...

qianfeng 2019-08-20 14:31 評論0 收藏0
指尖前端重構（React）技術調研分析

摘要：一為什么選擇是當前前端應用最廣泛的框架。目前來看的生態系統要比大的多，在等最大的技術社區搜索兩者，的搜索結果是的十倍左右，另外據近期統計使用的站點是的幾百倍以上。其中是基于技術，依然是瀏覽器應用。一、為什么選擇React React是當前前端應用最廣泛的框架。三大SPA框架 Angular、React、Vue比較。 Angular出現最早，但其在原理上并沒有React創新的性能優化...

AlphaWallet 2019-08-23 18:18 評論0 收藏0
有哪些 JS 調試技巧——devtool，以及安裝問題的解決

摘要：試試年年初出的調試神器基于將和的功能融合在了一起。直接命令行下啟動，替代命令和在下沒有交互的。解決方法在最下面。小技巧另外啟動調試可以用這樣可以監聽文件變化自動，以及在文件開頭自動以便打斷點調試。轉自本人知乎回答作者：mdluo鏈接：https://www.zhihu.com/question/20260762/answer/89388634來源：知乎著作權歸作者所有。商業轉載請聯...

gaomysion 2019-08-19 18:47 評論0 收藏0
webstorm 設置 sass自動編譯問題

摘要：語法使用它帶來的好處，就不再這里做介紹了，主要看怎么在里配置自動編譯。因為國內網絡的問題導致源間歇性中斷因此我們需要更換源。也就是說，任何標準的樣式表都是具有相同語義的有效的文件。參考文檔官網設置自動編譯及參數配置　　sass語法、使用它帶來的好處，就不再這里做介紹了，主要看怎么在webstorm里配置自動編譯。　　sass編譯是需要Ruby環境的，可以到這里去下載? : ?https:/...

APICloud 2019-04-23 13:13 評論0 收藏0
webstorm使用技巧

摘要：在中使用正則進行查找或替換使用正則來查找想該行數據替換為下行數據。完全是按照正則的規則來書寫的。注意勾選搜素或替換框中的，否則不生效。禁止索引從設置為刪除插件來避免卡死。在Webstorm中使用正則進行查找或替換使用正則來查找http://stackoverflow.com/ques... 想該行數據替換為下行數據。@include border-radius($big-radiu...

fanux 2019-08-20 15:52 評論0 收藏0