前端開發(fā)之gulp插件gulp-end

這一節(jié)芯义,我們說說gulp插件哈垢。
現(xiàn)在市面上應(yīng)該有上千種插件,gulp官方提供的不多扛拨,其他都是私人寫的耘分,我們可以拿過來直接用,如果你自己感興趣绑警,也可以自己寫一款gulp插件求泰,并開源分享給我們大家。
今天我們講的是在我們項(xiàng)目里邊比較核心的幾個(gè)计盒。
--1--gulp-connect
--2--gulp-contact
--3--gulp-minify-css
--4--gulp-imagemin
1渴频、gulp-connect
在做項(xiàng)目開發(fā)的時(shí)候,有時(shí)候也需要把項(xiàng)目放在本地服務(wù)器下去運(yùn)行北启。
gulp-connect很容易創(chuàng)建一個(gè)本地服務(wù)器去運(yùn)行項(xiàng)目卜朗。
下載:npm install gulp-connect --save-dev

下載gulp-connect插件
我們?cè)趎ode下引用第三方插件的時(shí)候拔第,都需要require一下,這個(gè)也符合commonjs語法聊替。
在使用之前引入gulp-connect文件楼肪,給他起名為connect
引入gulp-connect

gulp-connect示例
gulp-connect示例

然后在瀏覽器輸入localhost:8080/培廓,此時(shí)默認(rèn)打開的便是index.html惹悄。
好了,我們現(xiàn)在把服務(wù)器搭建起來了肩钠,那么在修改代碼時(shí)候泣港,怎樣才能夠?qū)崟r(shí)刷新呢?
1.修改的代碼在哪里价匠?src
2.服務(wù)器訪問的是什么文件夾当纱?dist
3.src里邊修改,更新dist里邊的文件踩窖,同時(shí)出發(fā)copeHTML這個(gè)任務(wù)
實(shí)時(shí)刷新

browser-sync可以在電腦手機(jī)平板多設(shè)備調(diào)試
browser-sync

合并文件concat

gulp-uglify壓縮js

合并文件

合并并壓縮文件

壓縮css內(nèi)容參數(shù)比較多坡氯,這里只簡(jiǎn)單介紹下操作流程,具體請(qǐng)移步https://github.com/jakubpawlowicz/clean-css

壓縮css文件
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末洋腮,一起剝皮案震驚了整個(gè)濱河市箫柳,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌啥供,老刑警劉巖悯恍,帶你破解...
    沈念sama閱讀 222,681評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異伙狐,居然都是意外死亡涮毫,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門贷屎,熙熙樓的掌柜王于貴愁眉苦臉地迎上來罢防,“玉大人,你說我怎么就攤上這事唉侄≈渫拢” “怎么了?”我有些...
    開封第一講書人閱讀 169,421評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵美旧,是天一觀的道長(zhǎng)渤滞。 經(jīng)常有香客問我,道長(zhǎng)榴嗅,這世上最難降的妖魔是什么妄呕? 我笑而不...
    開封第一講書人閱讀 60,114評(píng)論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮嗽测,結(jié)果婚禮上绪励,老公的妹妹穿的比我還像新娘肿孵。我一直安慰自己,他們只是感情好疏魏,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,116評(píng)論 6 398
  • 文/花漫 我一把揭開白布停做。 她就那樣靜靜地躺著,像睡著了一般大莫。 火紅的嫁衣襯著肌膚如雪蛉腌。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,713評(píng)論 1 312
  • 那天只厘,我揣著相機(jī)與錄音烙丛,去河邊找鬼。 笑死羔味,一個(gè)胖子當(dāng)著我的面吹牛河咽,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播赋元,決...
    沈念sama閱讀 41,170評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼忘蟹,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了搁凸?” 一聲冷哼從身側(cè)響起媚值,我...
    開封第一講書人閱讀 40,116評(píng)論 0 277
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎坪仇,沒想到半個(gè)月后杂腰,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,651評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡椅文,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,714評(píng)論 3 342
  • 正文 我和宋清朗相戀三年喂很,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片皆刺。...
    茶點(diǎn)故事閱讀 40,865評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡少辣,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出羡蛾,到底是詐尸還是另有隱情漓帅,我是刑警寧澤,帶...
    沈念sama閱讀 36,527評(píng)論 5 351
  • 正文 年R本政府宣布痴怨,位于F島的核電站忙干,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏浪藻。R本人自食惡果不足惜捐迫,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,211評(píng)論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望爱葵。 院中可真熱鬧施戴,春花似錦反浓、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,699評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至肪笋,卻和暖如春月劈,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背涂乌。 一陣腳步聲響...
    開封第一講書人閱讀 33,814評(píng)論 1 274
  • 我被黑心中介騙來泰國(guó)打工艺栈, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留英岭,地道東北人湾盒。 一個(gè)月前我還...
    沈念sama閱讀 49,299評(píng)論 3 379
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像诅妹,于是被迫代替她去往敵國(guó)和親罚勾。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,870評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容

  • 安裝Gulp首先需要安裝Node.js吭狡,并在控制臺(tái)輸入$ npm install gulp -gMac端需要寫成$...
    LaBaby_閱讀 929評(píng)論 0 1
  • gulpjs是一個(gè)前端構(gòu)建工具尖殃,與gruntjs相比,gulpjs無需寫一大堆繁雜的配置參數(shù)划煮,API也非常簡(jiǎn)單送丰,學(xué)...
    依依玖玥閱讀 3,157評(píng)論 7 55
  • gulpjs是一個(gè)前端構(gòu)建工具,與gruntjs相比弛秋,gulpjs無需寫一大堆繁雜的配置參數(shù)器躏,API也非常簡(jiǎn)單,學(xué)...
    井皮皮閱讀 1,306評(píng)論 0 10
  • 原文標(biāo)題:Gulp for Beginners作者: Zell Liew翻譯:治電小白菜原文地址:https://...
    ZZES_ZCDC閱讀 1,586評(píng)論 6 18
  • gulpjs是一個(gè)前端構(gòu)建工具蟹略,與gruntjs相比登失,gulpjs無需寫一大堆繁雜的配置參數(shù),API也非常簡(jiǎn)單挖炬,學(xué)...
    小裁縫sun閱讀 933評(píng)論 0 3