這一節(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插件
在使用之前引入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文件