資訊專欄INFORMATION COLUMN
摘要：所謂的表現(xiàn)樣式控制分離。再后來(lái)修改維護(hù)時(shí)如果修改一些參數(shù)，或者樣式很多時(shí)，結(jié)構(gòu)很混亂，維護(hù)很麻煩，于是有了等一眾預(yù)處理語(yǔ)言的一個(gè)好處就是可以讓的結(jié)構(gòu)很清晰。再加上現(xiàn)在模塊化那么流行，還要強(qiáng)調(diào)重用性，所以模塊里面還要再去套用模塊。
webstorm和nodejs都是神器，只是我一直都沒(méi)有發(fā)掘出來(lái)他們的厲害之處
要說(shuō)webstrom和node的配合使用不得不說(shuō)一下平時(shí)的工作流程這里以css為例
根據(jù)頁(yè)面劃分功能模塊
根據(jù)模塊寫(xiě)less或者修改less
編譯less為css
壓縮css并上傳
都說(shuō)前端是網(wǎng)頁(yè)設(shè)計(jì)，其實(shí)寫(xiě)css也可以很“面向?qū)ο蟆被蛘哒f(shuō)“面向結(jié)構(gòu)”
從最早的web頁(yè)面開(kāi)始時(shí)，樣式是寫(xiě)在HTML里面的，后來(lái)把css和js拿了出來(lái)(model,view,control。所謂的表現(xiàn)、樣式、控制分離)。
再后來(lái)css修改維護(hù)時(shí)如果修改一些參數(shù)，或者css樣式很多時(shí)，結(jié)構(gòu)很混亂，維護(hù)很麻煩，于是有了less等一眾CSS預(yù)處理語(yǔ)言(less的一個(gè)好處就是可以讓css的結(jié)構(gòu)很清晰)。
再加上現(xiàn)在模塊化那么流行，還要強(qiáng)調(diào)重用性，所以模塊里面還要再去套用模塊。
于是文件結(jié)構(gòu)變成了下面這樣
最外層是單個(gè)頁(yè)面或主模塊的less， 里面是某一個(gè)插件(swiper)的less或者某個(gè)動(dòng)畫(huà)(animate)效果的less
文件結(jié)構(gòu)已經(jīng)好了，然后呢？接下來(lái)就需要配合webstorm使用了
前提條件：安裝nodejs,安裝less,安裝less-plugin-clean-css，安裝webstorm
打開(kāi)webstorm-->File-->Setting-->Tools-->External tools(可以直接搜索)
如下圖：點(diǎn)擊加號(hào)-->填入命令的名字，選擇命令所屬分組（可以輸入創(chuàng)建，我這里的是css）,然后進(jìn)行工具設(shè)定
我這里要設(shè)定的是一條less的編譯并壓縮的命令（類(lèi)似下面這條）
lessc --plugin=less-plugin-clean-css a.less a.min.css
左下角方框第一行是命令文件地址
C:UsersAdministratorAppDataRoaming pmlessc.cmd （這是我電腦的地址，找不到文件可以在電腦上全局搜索lessc.md）
左下角方框第二行是執(zhí)行的命令
--plugin=less-plugin-clean-css $ProjectFileDir$$FileDirRelativeToProjectRoot$$FileName$ $ProjectFileDir$$FileDirRelativeToProjectRoot$$FileNameWithoutAllExtensions$.min.css （中間那些$看不懂的點(diǎn)右下角方框?qū)?yīng)的按鈕，對(duì)著選項(xiàng)點(diǎn)幾下你就明白是什么意思了,不懂英文也沒(méi)關(guān)系） 我這里命令的意思是直接壓縮并編譯less到對(duì)應(yīng)的項(xiàng)目文件夾，后綴名是.min.css
左下角方框第三行是命令工作目錄，一般選擇第一個(gè)時(shí)會(huì)自動(dòng)選中
$FileDir$
操作完畢后點(diǎn)擊OK保存
然后去設(shè)置一下這個(gè)命令的快捷鍵我的為：ALT+X
接下來(lái)就可以在webstorm里面很方便的使用這條命令了
最后，如果只是這么一條命令也就算了，你有沒(méi)有想過(guò)加入其它命令呢？
比如： 加入node,直接跑express服務(wù)器deng，
加入cmd，執(zhí)行bat腳本提交git倉(cāng)庫(kù)，
或者一些其它工具等等，
是不是瞬間感覺(jué)逼格滿滿，很期待呢？趕緊去嘗試吧！
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/111308.html
摘要：入門(mén)什么是是一個(gè)廣泛使用的轉(zhuǎn)碼器，可以將代碼轉(zhuǎn)為代碼，從而在現(xiàn)有環(huán)境執(zhí)行。 babel6 入門(mén) 什么是babel Babel是一個(gè)廣泛使用的轉(zhuǎn)碼器，可以將ES6代碼轉(zhuǎn)為ES5代碼，從而在現(xiàn)有環(huán)境執(zhí)行。 因?yàn)閑s6比es5的代碼更為適合編寫(xiě)程序,但是因?yàn)闅v史的原因,現(xiàn)在普遍的瀏覽器并不支持es6代碼(普遍支持es5),即如果你寫(xiě)es6代碼之后,在瀏覽器上運(yùn)行出錯(cuò),因?yàn)闉g覽器的javas...
摘要：一為什么選擇是當(dāng)前前端應(yīng)用最廣泛的框架。目前來(lái)看的生態(tài)系統(tǒng)要比大的多，在等最大的技術(shù)社區(qū)搜索兩者，的搜索結(jié)果是的十倍左右，另外據(jù)近期統(tǒng)計(jì)使用的站點(diǎn)是的幾百倍以上。其中是基于技術(shù)，依然是瀏覽器應(yīng)用。 一、為什么選擇React React是當(dāng)前前端應(yīng)用最廣泛的框架。三大SPA框架 Angular、React、Vue比較。 Angular出現(xiàn)最早，但其在原理上并沒(méi)有React創(chuàng)新的性能優(yōu)化...
摘要：試試年年初出的調(diào)試神器基于將和的功能融合在了一起。直接命令行下啟動(dòng)，替代命令和在下沒(méi)有交互的。解決方法在最下面。小技巧另外啟動(dòng)調(diào)試可以用這樣可以監(jiān)聽(tīng)文件變化自動(dòng)，以及在文件開(kāi)頭自動(dòng)以便打斷點(diǎn)調(diào)試。 轉(zhuǎn)自本人知乎回答 作者：mdluo鏈接：https://www.zhihu.com/question/20260762/answer/89388634來(lái)源：知乎著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)...
摘要：語(yǔ)法使用它帶來(lái)的好處，就不再這里做介紹了，主要看怎么在里配置自動(dòng)編譯。因?yàn)閲?guó)內(nèi)網(wǎng)絡(luò)的問(wèn)題導(dǎo)致源間歇性中斷因此我們需要更換源。也就是說(shuō)，任何標(biāo)準(zhǔn)的樣式表都是具有相同語(yǔ)義的有效的文件。參考文檔官網(wǎng)設(shè)置自動(dòng)編譯及參數(shù)配置 sass語(yǔ)法、使用它帶來(lái)的好處，就不再這里做介紹了，主要看怎么在webstorm里配置自動(dòng)編譯。 sass編譯是需要Ruby環(huán)境的，可以到這里去下載? : ?https:/...
摘要：在中使用正則進(jìn)行查找或替換使用正則來(lái)查找想該行數(shù)據(jù)替換為下行數(shù)據(jù)。完全是按照正則的規(guī)則來(lái)書(shū)寫(xiě)的。注意勾選搜素或替換框中的，否則不生效。禁止索引從設(shè)置為刪除插件來(lái)避免卡死。 在Webstorm中使用正則進(jìn)行查找或替換 使用正則來(lái)查找http://stackoverflow.com/ques... 想該行數(shù)據(jù)替換為下行數(shù)據(jù)。@include border-radius($big-radiu...
閱讀 994·2021-11-15 17:58
閱讀 3846·2021-11-12 10:36
閱讀 3901·2021-09-22 16:06
閱讀 1075·2021-09-10 10:50
閱讀 1395·2019-08-30 11:19
閱讀 3373·2019-08-29 16:26
閱讀 1026·2019-08-29 10:55
閱讀 3428·2019-08-26 13:48
