基于gulp构建一个工作流

实现前

实现之前，我们先来了解下 gulp 自动构建工具的具体流程

具体工作流程可以简化为
读取文件流 --> 转化流文件 --> 写入流文件

完整的实现流程如下
- 确定需求，需要构建的任务
- 初始化项目 yarn init
- 安装项目依赖 yarn add --dev gulp | yarn add -g gulp
- 在项目的根目录下创建 gulpfile.js 文件
- 在 gulpfile.js 中实现我们的任务
- 导出需要使用的任务 module.exports = {start, build, ...}
- 根据团队需求确定是否在 package.json 文件的 scripts 中构建命令
- 测试 gulp + symbolName || yarn + scriptsName
- 输出结果

工作流程图markdown语法画不出来,将就着看下

一、需求

yarn lint 用于处理 scripts & styles 文件的格式问题
yarn compile 用于生成对应的 styles & scripts & pages 文件
yarn serve 用于app的开发运行对应的配置传入 open port
yarn build 用于打包对应的配置传入 production prod
yarn start 运行当前项目生成环境对应的配置传入 open port
yarn deploy 将当前文件推送到 github 的分支默认 gh-pages
yarn clean 用于清除 dist temp 两个目录下的文件

二、按照需求定义相应的任务

API说明见备注

初始化我们的项目
- yarn init
- 安装 gulp 依赖 yarn add --dev gulp
- 安装 gulp 脚手架 yarn add -g gulp-cli 考虑到后续会多次使用

定义一个 lint 任务用于实现对 js scss 代码格式的校验

此处使用eslint stylelint 来校验我们的代码
安装相应的依赖 yarn add --dev gulp-eslint gulp-stylelint stylelint stylelint-scss gulp-load-plugins

安装完依赖，接下来来实现对应的任务，以下为实现任务的代码片段

// 样式校验任务 需要在项目根目录下 添加相应的规则文件 .stylelintrc.json
const lintStyles = () => {
    // dest() 写入流文件 
    return src(config.paths.styles, {
        cwd: config.src
    }).pipe(plugins.stylelint())
}
// js校验任务 需要在项目根目录下 添加相应的规则文件 .eslintrc.json
const lintScripts = () => {
return src(config.paths.scripts, {
        base: config.src,
        cwd: config.src
    }).pipe(plugins.eslint())
    .pipe(plugins.eslint.format())
    .pipe(plugins.eslint.failAfterError())
}
// 因为两个任务可以并行执行 所有选择 parallel
const lint = parallel(lintStyles, lintScripts)

scripts配置对应的命令 lint: gulp lint运行对应的命令 yarn lint 校验是否如预期的效果一样

校验正常

校验异常

定义一个 compile 任务用于处理 html ｜ js ｜ scss 文件，并打包到 temp 文件下

重复流程
安装需要用到的依赖 yarn add --dev gulp-sass gulp-babel @babel/preset-env gulp-swig browser-sync
定义一个 pages 任务用于对 html 文件的处理；定义一个 scripts 任务用于对 js 文件的处理；定义一个 styles 任务用于对 scss 文件的处理转换；其次通过 parallel 构建 gulp compile 命令, 最后配置对应的 scripts 任务即可；以下为实现任务的代码片段

const pages = () => {
return src(config.paths.pages, {
    cwd: config.src, 
    ignore: ['{layouts,partials}/**']
})
// 将 data 数据渲染到 html 模板中
.pipe(plugins.swig(data))
.pipe(dest(config.temp))
}

const scripts = () => {
return src(config.paths.scripts, {
    base: config.src,
    cwd: config.src, 
    sourcemaps: !isProd
})
.pipe(plugins.babel({presets: [require('@babel/preset-env')]}))
.pipe(dest(config.temp, { sourcemaps: '.' }))
// 如果 流文件 有变动 刷新当前的 页面
.pipe(bs.reload({stream: true}))
}

const styles = () => {
return src(config.paths.styles, {
    base: config.src,
    cwd: config.src, 
    sourcemaps: !isProd
})
.pipe(plugins.sass())
.pipe(dest(config.temp, { sourcemaps: '.' }))
.pipe(bs.reload({stream: true}))
}

const compile = parallel(pages, scripts, styles)

测试 yarn compile

为了便于调试，优先实现 yarn clean 命令用于删除生成的缓存文件
- 重复流程,安装 del 依赖，用于删除对应的文件
- 具体实现代码如下
```
const clean = () => {
    return del([config.temp, config.dist])
}
```
- 导出 clean 命令，测试 yarn clean

定义一个 serve 任务用于开发调试使用可传入参数 --port 端口号 --open 布尔值

重复流程,安装 minimist 依赖用于处理 node 命令将 --open --port 转换为参数
具体实现代码如下

const argv = minimist(process.argv.slice(2))
const devServe = () => {
    watch(config.paths.pages, {cwd: config.src}, pages)
    watch(config.paths.scripts, {cwd: config.src}, scripts)
    watch(config.paths.styles, {cwd: config.src}, styles)

    watch([
        config.paths.images, 
        config.paths.fonts
    ], 
    {cwd: config.src}, 
    bs.reload
    )
    watch('**', {cwd: config.public}, bs.reload)
    bs.init({
        notify: false,
        open: argv.open ? true : false,
        port: argv.port ? argv.port : 2080,
        plugins: [`bs-html-injector?files[]=${config.temp}/*.html`],
        server: {
            baseDir: [config.temp, config.src, config.public], // 'dist',
            // 优先级高于 baseDir，路由映射 使用useref解决对应的打包问题
            routes: {
                '/node_modules': 'node_modules'
            }
        }
    })
}

const compile = parallel(pages, scripts, styles)
const serve = series(compile, devServe)

测试功能 yarn serve | year serve --port 8088 --open true

定义一个 build 任务，用于对我们即将要发布的文件进行打包压缩可传入传输 --prod --production

重复流程,安装 gulp-uglify gulp-html gulp-clean-css gulp-imagemin gulp-size gulp-if 等依赖，用于压缩对应的 js & html & css & images & fonts 等文件的压缩

const isProd = process.env.NODE_ENV
    ? process.env.NODE_ENV === 'production'
    : argv.production || argv.prod || false

const images = () => {
    return src(config.paths.images, {
        base: config.src,
        cwd: config.src
    })
    .pipe(plugins.imagemin())
    .pipe(dest(config.dist))
}

const fonts = () => {
    return src(config.paths.fonts, {
        base: config.src,
        cwd: config.src
    })
    .pipe(plugins.imagemin())
    .pipe(dest(config.dist))
}

const extra = () => {
    return src('**', {
        base: config.public,
        cwd: config.public
    })
    .pipe(dest(config.dist))
}

const measure = () => {
    return src('**', { cwd: config.dest })
    .pipe(plugins.size({ gzip: true }))
}

const useref = () => {
    return src(config.paths.pages, {base: config.temp, cwd: config.temp})
        .pipe(plugins.useref({searchPath: [config.temp, '.']}))
        .pipe(plugins.if(/\.js$/, plugins.uglify()))
        .pipe(plugins.if(/\.css$/, plugins.cleanCss()))
        .pipe(plugins.if(/\.html$/, 
            plugins.html(
            {
                indent_size: 2, 
                max_preserve_newlines: 1
            }
        )))
        .pipe(dest(config.dist))
}

const compile = parallel(pages, scripts, styles)
const build = series(
    clean, 
    parallel(
        series(compile, useref), 
        fonts, 
        images, 
        extra
    ), 
    measure
)

测试功能 yarn build | year build --prod ｜ year build --production

构建一个 start 任务，运行当前项目生成环境对应的配置传入 --open 布尔值 --port 端口号

重复流程具体实现代码如下：

    const prodServe = () => {
        bs.init({
            notify: false,
            open: argv.open ? true : false,
            port: argv.port ? argv.port : 2080,
            server: config.dist
        })
    }

    const build = series(
        clean, 
        parallel(
            series(compile, useref), 
            fonts, 
            images, 
            extra
        ), 
        measure
    )

    const start = series(build, prodServe)

测试功能 yarn start | year start --port 8088 --open true

构建一个 deploy 任务，将当前文件推送到 github 的分支默认 gh-pages

重复流程，安装项目依赖 gulp-gh-pages 具体实现代码如下：

    const push = () => {
        return src('**', {cwd: config.dist})
        .pipe(plugins.ghPages({
            // 提交到 github 的分支名称
            branch: argv.branch ? argv.branch : 'gh-pages',
            // 本地构建的缓存目录
            cacheDir: `${config.temp}/publish`
        }))
    }

测试功能 yarn deploy

到此，我们就完成了一个gulp脚手架的构建任务了

备注

src()

属性	作用
globs	返回一个可以在管道中使用的流
options	配置文件的详细说明

options

属性	作用
base	在流文件中设置对应的属性
cwd	与相对路径结合形成绝对路径
sourcemaps	加载内部sourcemaps 解析外部的sourcemaps
ignore	从匹配中排除对应的文件

pipe 转换对应的流文件

dest()

属性	作用
directory	将文件写入的输出目录的路径
options	配置文件的详细说明

options

属性	作用
cwd	与相对路径结合形成绝对路径
overwrite	是否覆盖相同路径的文件 default：true
sourcemaps	将内部sourcemaps写入输出文件外部sourcemaps

watch()

监听globs并在发生更改时运行任务，任务与任务系统的其余部分被统一处理

属性	作用
globs	用来监听文件系统
options	配置文件的详细说明
task	一个任务函数

more api