gulp是一個基於任務的工具

gulpfile.js

const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass'));//將scss編譯成css
const browserSync = require('browser-sync');//微型服務，當資源改動時，瀏覽器會自動重新整理
const minifycss = require('gulp-minify-css');//css壓縮外掛
const uglify = require('gulp-uglify');//js壓縮外掛
const changed = require('gulp-changed');//只編譯更改過的檔案
const htmlmin = require('gulp-htmlmin');//壓縮html檔案
const del = require('del');//刪除檔案
const revFormat = require('gulp-rev-format');//xx.css格式化成xx.8ac2s2jz.cache.css形式
const rev = require('gulp-rev-dxb');//生成需要版本替換的靜態資源清單
const revCollector = require('gulp-rev-collector-dxb');//將生成好的靜態資源清單替換到html檔案中

/***************編譯SCSS***********************/
gulp.task("sass",(done)=>{
    gulp.src("src/assets/scss/*.scss")
        .pipe(sass())
        .pipe(minifycss())
        .pipe(gulp.dest("dist/static/css"))
        .pipe(browserSync.reload({
            stream:true
        }))
    done();
})

/***************編譯CSS***********************/
gulp.task('css',(done)=>{
    gulp.src("src/assets/css/*/*.css")
        .pipe(minifycss())
        .pipe(changed("dist/static/css"))
        .pipe(gulp.dest("dist/static/css"))
        .pipe(browserSync.reload({
            stream:true
        }))
    done();
})

/***************編譯圖片***********************/
gulp.task('image',(done)=>{
    gulp.src("src/assets/images/**")
        .pipe(gulp.dest("dist/static/images"))
        .pipe(browserSync.reload({
            stream:true
        }))
    done();
})

/***************編譯JS***********************/
gulp.task("js",(done)=>{
    gulp.src(["src/assets/js/*.js","!src/assets/js/tools.js"])
        .pipe(uglify({ mangle: { toplevel: true }}))
        .pipe(changed("dist/static/js"))
        .pipe(gulp.dest('dist/static/js'))
        .pipe(gulp.src(['src/assets/js/tools.js']))
        .pipe(changed("dist/static/js"))
        .pipe(gulp.dest('dist/static/js'))
        .pipe(browserSync.reload({
            stream:true
        }))
    done();
})

/***************編譯html***********************/
gulp.task("html",(done)=>{
    gulp.src("src/views/*.html")
        .pipe(changed("dist/views"))
        .pipe(htmlmin({collapseWhitespace:true}))
        .pipe(gulp.dest('dist/views'))
        .pipe(browserSync.reload({
            stream:true
        }))
    gulp.src("popup.html")
        .pipe(changed("dist"))
        .pipe(htmlmin({collapseWhitespace:true}))
        .pipe(gulp.dest('dist'))
        .pipe(browserSync.reload({
            stream:true
        }))
    done();
})

/***************瀏覽器服務***********************/
gulp.task("browserSync",()=>{
    browserSync({
        server:{
            baseDir:'./dist'
        }
    })
})

/***************copy內容***********************/
gulp.task("copy",(done)=>{
    gulp.src(['manifest.json'])
        .pipe(gulp.dest('dist/'))
        .pipe(gulp.src(['static/**']))
        .pipe(gulp.dest('dist/static'))
        .pipe(browserSync.reload({
            stream:true
        }))
    done();
})

/***************刪除資料夾***********************/
gulp.task('clean',(done)=>{
    del(['dist','config'])
    done();
})

/***************生成版本號清單***********************/
gulp.task('rev', function() {
    return gulp.src(['dist/static/**','!dist/static/js/lib/**'])
        .pipe(rev())
        .pipe(revFormat({
            prefix: '.', // 在版本號前增加字元
            suffix: '.cache', // 在版本號後增加字元
            lastExt: false
        }))
        .pipe(rev.manifest())
        .pipe(gulp.dest("config/"));
});


/***************路徑替換***********************/
gulp.task('update-version', ()=> {
    return gulp.src(['config/*.json','dist/views/*.html'])
        .pipe(revCollector({
            replaceReved:true,
        }))
        .pipe(gulp.dest('dist/views'));
});

/***************生成版本清單及靜態資源路徑路徑***********************/
gulp.task('rev-update-version',gulp.series('rev',gulp.parallel('update-version')))

/**
 * 執行watch之前需要全量打包編譯一下，npm run build
 * 因為伺服器執行的是dist已編譯完的檔案
 * */
gulp.task("watch",(done)=>{
    gulp.series('browserSync',()=>{})();
    gulp.watch('src/assets/css/**',gulp.series(['css']))
    gulp.watch('src/assets/sass/**',gulp.series(['sass']))
    gulp.watch('src/assets/js/**',gulp.series(['js']))
    gulp.watch('src/views/**',gulp.series(['html']))
    gulp.watch(['static/**','manifest.json'],gulp.series(['copy']))
    done();
})

/**
 * 打包編譯
 *
 * */
gulp.task("default",gulp.series(['sass','css','js','copy','image','html']))

package.json

{
  "name": "gulp-demo",
  "version": "1.0.1",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "gulp",
    "start": "gulp watch",
    "update-version": "gulp rev-update-version"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "browser-sync": "^2.27.7",
    "del": "^6.0.0",
    "gulp": "^4.0.2",
    "gulp-changed": "^4.0.3",
    "gulp-htmlmin": "^5.0.1",
    "gulp-minify-css": "^1.2.4",
    "gulp-rename": "^2.0.0",
    "gulp-rev-collector-dxb": "^1.3.2",
    "gulp-rev-dxb": "^9.0.1",
    "gulp-rev-format": "^1.0.5",
    "gulp-sass": "^5.0.0",
    "gulp-uglify": "^3.0.2",
    "sass": "^1.43.4"
  }
}