一個構gulp自動化構建工作流案例
需要對樣式文件，js文件，html文件，圖片字體文件，其他額外文件依次構建任務，並在此過程中實現對文件的壓縮合並

const {
    src,
    dest,
    series,
    parallel,
    watch,
} = require('gulp');

const loadPlugins = require('gulp-load-plugins')
const plugins = loadPlugins() // 加載插件模塊
const sass = require('gulp-sass')(require('sass'));
// sass.compiler = require("node-sass");
// const plugins.babel = require('gulp-babel')
// const plugins.swig = require('gulp-swig')
// const plugins.imagemin = require('gulp-imagemin')
const del = require('del') // 清除文件插件
const browserSync = require('browser-sync') // 提供一個可以熱更新的開發服務器
const bs = browserSync.create() // 創建一個開發服務器

const data = `your template data`

// 清理dist文件夾
const clean = () => {
    return del(['dist', 'temp'])
}

const style = () => {
    // base參數保留了src目錄後面的基準路徑
    return src('src/assets/styles/*.scss', {
            base: 'src'
        })
        .pipe(sass({
            outputStyle: 'expanded'
        })) // 完全展開
        .pipe(dest('temp')) // 放到臨時目錄
        .pipe(bs.reload({
            stream: true
        })) // 內部文件流信息推到瀏覽器
}

const script = () => {
    return src('src/assets/scripts/*.js', {
            base: 'src'
        })
        .pipe(plugins.babel({
            presets: ['@babel/preset-env'] // 包含了最新的js語法
        }))
        .pipe(dest('temp'))
        .pipe(bs.reload({
            stream: true
        }))
}

const page = () => {
    return src('src/**/*.html', {
            base: 'src'
        }) // **代表了src目錄下任意html文件
        .pipe(plugins.swig({
            data, // 動態數據模板編譯輸出
            defaults: {
                cache: false // 防止模板緩存導致頁面不能及時更新
            }
        }))
        .pipe(dest('temp'))
        .pipe(bs.reload({
            stream: true
        }))
}

const image = () => {
    return src('src/assets/images/**', {
            base: 'src'
        })
        .pipe(plugins.imagemin())
        .pipe(dest('dist'))
}

const font = () => {
    return src('src/assets/fonts/**', {
            base: 'src'
        })
        .pipe(plugins.imagemin())
        .pipe(dest('dist'))
}

const extra = () => { // 拷貝額外文件
    return src('public/**', {
            base: 'public'
        })
        .pipe(dest('dist'))
}

const server = () => {
    watch('src/assets/styles/*.scss', style)
    watch('src/assets/scripts/*.js', script)
    watch('src/*.html', page)
    // 下面三個任務，只需要上線的時候發佈出去即可,開發階段的構建需要減少構建，提高構建效率
    // watch('src/assets/image/**', image)  
    // watch('src/assets/fonts/**', font)
    // watch('public/**', extra)
    watch([
        'src/assets/images/**',
        'src/assets/fonts/**',
        'public/**'
    ], bs.reload)

    bs.init({
        notify: false,
        port: 2180,
        // files: 'dist/**', // 監聽文件夾  srcipt,style,page因為bs.realod,這裏不用再監聽
        // open: false, // 取消打開瀏覽器
        server: {
            baseDir: ['temp', 'src', 'public'], // 服務器運行根目錄，數組內為依次尋找目錄
            routes: {
                '/node_modules': 'node_modules'
            }
        }
    })
}

const useref = () => {
    return src('temp/*.html', {
            base: 'temp'
        })
        .pipe(plugins.useref({
            searchPath: ['temp', '.']
        })) // 處理構建註釋,合併到一個文件中
        // 壓縮html,js,css
        .pipe(plugins.if(/\.js$/, plugins.uglify()))
        .pipe(plugins.if(/\.css$/, plugins.cleanCss()))
        .pipe(plugins.if(/\.html$/, plugins.htmlmin({
            collapseWhitespace: true, // 處理html文件空格
            minifyCSS: true,
            minifyJS: true
        })))
        .pipe(dest('release'))
}

const compile = parallel(style, script, page) // 並行執行三個任務，組合為一個compile任務

// build之前執行clean任務,上線之前執行build
const build = series(clean, parallel(series(compile, useref), image, font, extra));

const develop = series(compile, server)

module.exports = {
    build,
    clean,
    develop,
}