关于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 工作, 上线之前执行 build
const build = series(clean, parallel(series(compile, useref), image, font, extra));

const develop = series(compile, server)

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