关于gulp:一个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工作,上线之前执行buildconst build = series(clean, parallel(series(compile, useref), image, font, extra));const develop = series(compile, server)module.exports = {    build,    clean,    develop,}