gulpfile配置及常用外掛程式

2021-10-01 13:06:13 字數 2318 閱讀 5455

需求：

實現開發模式下啟動伺服器，檔案修改後實現自動過載（熱更新）；打包模式下進行檔案壓縮與版本更新（防止快取）。

gulp版本為4.0.2

package.json scripts 與 devdependencies 依賴包安裝



,"author"


:"ys"


,"license"


:"isc"


,"dependencies":,


"devdependencies"


:}
外掛程式引用
const


=require


('gulp');


const connect =


require


('gulp-connect');


//啟動本地服務


const open =


require


("open");


//開啟瀏覽器


const del =


require


('del');


//刪除檔案及資料夾


const sass =


require


('gulp-sass');


//sass、scss編譯


const ts =


require


('gulp-typescript');


//編譯ts


const rev =


require


("gulp-rev");


//檔案版本號


const revcollector =


require


("gulp-rev-collector");


//檔案版本號對映


const uglify =


require


("gulp-uglify");


//js檔案壓縮


const cssmin =


require


("gulp-cssmin");


//css壓縮


const htmlmin =


require


("gulp-htmlmin");


//html檔案壓縮
變數配置

;let html_min_options =

;刪除【開發模式】與【發布模式】生成的檔案與資料夾

function


clean


(cb)
開發模式【dev】任務
function


()}
發布模式【build】任務
function


image_build()


function


scss_build()


function


css_build()


function


css_clean


(cb)


function


tsc_build()


function


js_build()


function


image_rev_collector()


)).pipe


(dest


'/'));


}function


html_build()


))//.pipe(htmlmin(html_min_options))


.pipe


(dest


'/'));


}function


build_clean


(cb)
**位址

webpack外掛程式配置及常用外掛程式

plugins new webpack.provideplugin new webpack.ignoreplugin locale moment 有的外掛程式是開發模式不用，到生產模式下才用,可如下設定 production 指生產模式 new webpack.optimize.uglifyjspl...

配置gulpfile，新增task任務

需求 在本地靜態環境下，寫好css後，需要同步至生產壞境，每次都需要複製，比較麻煩，有時候還會出現忘了的情況。基於css本就用gulp進行壓縮和實時編譯，所以直接把同步的功能寫在gulpfile中。步驟如下 1 在bin目錄下新建cpcss檔案，不帶任何字尾名，可用git touch 新建 bin ...

VSCode常用熱鍵及外掛程式配置同步

認真寫好每一篇，愉悅自己，也方便他人 工欲善其事必先利其器 phpstorm 2020.1.1常用熱鍵 vscode外掛程式和配置同步到gitee 基本熱鍵 格式化 shift alt f 重新命名 f2 查詢內容 ctrl f esc 退出查詢 替換內容 ctrl h esc 退出替換 快速檢索檔...