流程

  1. 创建一个 node 模块，把 demo 中的 gulpfile 中的内容提取到模块的入口文件。把 demo 的开发依赖转移到模块的依赖。demo 中的 gulpfile 的内容改成：

    1. module.exports = require('chen-pages')

  2. 通过 yarn link 和 yarn link “模块名”，把模块添加到 demo 的 node_modules。

  3. 由于模块尚未发布，这时 demo 运行 gulp 命令，会找不到 gulp ，需要暂时添加 gulp-cli 和 gulp 作为开发依赖。如果模块正式发布，则无需此步骤。

  4. demo 中创建一个 pages.config.js 文件，作为约定的配置文件，把模块入口文件中的 data 项转移到里面。

image.png

  1. 在模块入口文件，原来的data项的位置，读取配置文件。原引用 data 项的地方改为 config.data。 ```javascript const cwd = process.cwd() let config = {}

try { const loadConfig = require(${cwd}/pages.config.js) config = Object.assign({}, config, loadConfig) } catch (error) { }

const page = () => { return src(‘src/*.html’, { base: ‘src’ }) .pipe(plugins.swig({ data: config.data, defaults: { cache: false } })) // 由原本的data改为data:config.data .pipe(dest(‘temp’)) .pipe(bs.reload({ stream: true })) }

  2. 6. script 任务中配置了 preset-env 的preset，旧的引入方式是在 demo 的 node_modules 下找，但现在 demo 中没有安装，应该修改成 require，require 是在模块里面找。
  3. ```javascript
  4. const script = () => {
  5.   return src('src/assets/scripts/*.js', { base: 'src' })
  6.     .pipe(plugins.babel({ presets: ['@babel/preset-env'] }))
  7.     .pipe(dest('temp'))
  8.     .pipe(bs.reload({ stream: true }))
  9. }
  11. const script = () => {
  12.   return src('src/assets/scripts/*.js', { base: 'src' })
  13.     .pipe(plugins.babel({ presets: [require('@babel/preset-env')] }))
  14.     .pipe(dest('temp'))
  15.     .pipe(bs.reload({ stream: true }))
  16. }
  1. 至此，自动构建化工作流模块完成。

优化

抽象路径配置

把模块的入口文件中，写死的配置路径抽象到 config 对象中，这样可以实现在项目中自行修改路径。

  1. let config = {
  2.   build: {
  3.     src: 'src',
  4.     dist: 'dist',
  5.     temp: 'temp',
  6.     public: 'public',
  8.     paths: {
  9.       styles: 'assets/styles/*.scss',
  10.       scripts: 'assets/scripts/*.js',
  11.       pages: '*.html',
  12.       images: 'assets/images/**',
  13.       fonts: 'assets/fonts/**',
  14.     }
  15.   }
  16. }
  18. // 原本的代码
  19. const style = () => {
  20.   return src('src/assets/styles/*.scss', { base: 'src' })
  21.     .pipe(plugins.sass({ outputStyle: 'expanded' }))
  22.     .pipe(dest('temp'))
  23.     .pipe(bs.reload({ stream: true }))
  24. }
  26. // 抽象路径后代码
  27. const style = () => {
  28.   return src(config.build.paths.styles, { base: config.build.src, cwd: config.build.src }) //cwd变量可以指定相对路径，这里效果等同于 src(config.build.src + config.build.paths.styles, { base: config.build.src })
  29.     .pipe(plugins.sass({ outputStyle: 'expanded' }))
  30.     .pipe(dest(config.build.temp))
  31.     .pipe(bs.reload({ stream: true }))
  32. }
  36. // 原本的代码
  37. const extra = () => {
  38.   return src('public/**', { base: 'public' })
  39.     .pipe(dest('dist'))
  40. }
  42. // 抽象路径后代码
  43. const extra = () => {
  44.   return src('**', { base: config.build.public, cwd: config.build.public })
  45.     .pipe(dest(config.build.dist))
  46. }
  50. // 原本的代码
  51. const serve = () => {
  53.   watch('src/assets/styles/*.scss', style)
  54.   watch('src/assets/scripts/*.js', script)
  55.   watch('src/*.html', page)
  56.   watch([
  57.     'src/assets/images/**',
  58.     'src/assets/fonts/**',
  59.     'public/**',
  60.   ], bs.reload)
  62.   bs.init({
  63.     notify: false,
  64.     // files: 'dist/**',
  65.     port: 3080,
  66.     // open: false,
  67.     server: {
  68.       baseDir: ['temp', 'src', 'public'],
  69.       routes: {
  70.         '/node_modules': 'node_modules'
  71.       }
  72.     }
  73.   })
  74. }
  77. // 抽象路径后代码
  78. const serve = () => {
  80.   watch(config.build.paths.styles, { cwd: config.build.src }, style)
  81.   watch(config.build.paths.scripts, { cwd: config.build.src }, script)
  82.   watch(config.build.paths.pages, { cwd: config.build.src }, page)
  83.   watch([
  84.     config.build.paths.images,
  85.     config.build.paths.fonts,
  86.   ], { cwd: config.build.src }, bs.reload)
  88.   watch('**', { cwd: config.build.public }, bs.reload)
  90.   bs.init({
  91.     notify: false,
  92.     // files: 'dist/**',
  93.     port: 3080,
  94.     // open: false,
  95.     server: {
  96.       baseDir: [config.build.temp, config.build.src, config.build.public],
  97.       routes: {
  98.         '/node_modules': 'node_modules'
  99.       }
  100.     }
  101.   })
  102. }

封装 Gulp-CLI

  1. 在之前的 demo 中，gulpfile 文件的作用就是引入模块提供的任务，显得比较冗余。可以通过在模块中添加 cli ，把 gulp 封装到模块中。在模块根目录添加 bin 目录，bin 目录下添加一个 cli 入口文件，在 package.json 中添加 bin 字段，bin 字段值就是入口文件。 <br />![image.png](https://cdn.nlark.com/yuque/0/2021/png/21429065/1625325795885-21532acc-b93b-4121-a70c-9c7a6ee108c9.png#clientId=u868f99e8-75c5-4&from=paste&height=68&id=u2919865a&margin=%5Bobject%20Object%5D&name=image.png&originHeight=83&originWidth=243&originalType=binary&ratio=1&size=3612&status=done&style=none&taskId=ue8b4c6d1-2103-4a85-85b1-e477f8ef819&width=198.5)
  1. "bin": "bin/chen-page.js",

cli 入口文件的内容：

  1. #!/usr/bin/env node
  3. // 拼接命令行参数
  4. process.argv.push('--cwd') // 指定工作目录
  5. process.argv.push(process.cwd())  // 当前目录
  6. process.argv.push('--gulpfile') //指定 gulpfile 文件
  7. process.argv.push(require.resolve('..')) //这里可以写成 ../lib/index.js，简写成 .. 会去查找 package.json 中的 main 字段
  8. // console.log(process.argv);
  10. require('gulp/bin/gulp')   // 执行 gulp 模块的 gulp 文件

发布并使用模块

  1. yarn publish --registry https://registry.yarnpkg.com // 发布
  2. yarn add chen-pages --dev // 安装