一个gulp构建工作流案例

一个构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,
}