封装自己的gulp集成 如果碰到多个相同性质的项目 为了多项目复用
创建一个模块，发布到npm仓库 --- 托管到github或码云
-------工作流准备 start -----------------------------------------------------------------------
创建了一个wrk-gulp-integration 放在了码云。
将初始化文件都弄好，提交到码云，因为这个wrk-gulp-integration是要放在npm仓库，
但是在开发阶段，这个模块并没有开发好,所以，使用yarn link的方式，将这个模块link到全局，
然后再去项目当中使用yarn link "wrk-gulp-integration" 就会自动的出现在我们项目的node_modules中
-------工作流准备 end -----------------------------------------------------------------------
-------提取gulpfile.js start -----------------------------------------------------------------------
将我们之前在项目中封装好的gulpfile复制到wrk-gulp-integration插件的lib/index入口文件，将作为项目中下载了这个# 插件的时候，用到的打包配置文件
将插件link到项目中后，直接运行yarn build会报出找不到gulp的错误，本地先安装上
yarn add gulp --dev 这个问题等发布到npm仓库就不会出现了，因为会自动安装
然后再运行，还会报出一个调用文件的错误，因为插件当中的index引用了package.json文件，它指向的是插件中的，而# 不是我们项目中的，这个需要解决
-------提取gulpfile.js end -----------------------------------------------------------------------
-------解决模块中的问题 start -----------------------------------------------------------------------
将不需要提取的抽离出来，使用约定大于配置的方式，在我们本地项目中去自行配置，而不在插件中去配置
比如我们约定，让插件去读取项目中的特定的gulp外在配置文件，来获取一些东西，比如就叫pages.config.js
如何让插件读取本地项目中的文件，
const cwd = process.cwd(); // 返回当前命令行所在的工作目录
let config = {
// default config
}
try {
const loadConfig = require(${cwd/pages.config.js})
config = Object.assign({}, config, loadConfig);
} catch (e) {}
这样的话，我们就可以使用config.data来替换插件自己的调用
还会遇到的错误就是，在公共插件中引用的presets: ['@babel/preset-env'] 类似这种的，也会报错，因为我们
本地的项目中并没有下载这种的模块，就会报错，最好的方法就是，让插件自己引用自己的东西
改为 presets: [require('@babel/preset-env')]
3 -------解决模块中的问题 end -----------------------------------------------------------------------
-------抽象路径配置 start -----------------------------------------------------------------------
可以将插件内的定死的路径，比如 "src/assets/styles/.scss" "src/assets/scripts/.js" 这种的，从使用者
的角度出发，并不是太理想，最好的是，这些也可以自定义配置，因为不是每个项目都跟我们的插件路径是一样的
然后就是将插件中的所有固定的路径，都改成配置中的路径，我们可以在pages.config.js中修改一下dist和temp路径试试
-------抽象路径配置 end -----------------------------------------------------------------------
-------包装gulp cli start -----------------------------------------------------------------------
还可以将这个模块变得更加便捷，上面的弄完了之后，还需要在项目中添加gulpfile和pages.config.js
还能继续优化，让这两个文件都不需要创建就能用
首先删除项目中的gulpfile文件，运行yarn gulp 会报出找不到gulpfile文件的错误，
解决方法就是，可以通过命令指定gulpfile文件的路径
yarn gulp --gulpfile build ./node_modules/wrk-gulp-integration/lib/index.js --cwd .
上面的命令太长且复杂，可以将wrk-gulp-integration封装成cli，指定cli入口，然后在入口里去调用gulp
在wrk-gulp-integration创建bin/wrk-gulp-integration.js
#!/usr/bin/env node process.argv.push('--cwd') process.argv.push(process.cwd()) process.argv.push('--gulpfile') process.argv.push(require.resolve('..')) // 其实找的就是这个，因为package指定的main字段 ../lib/index.js
require('gulp/bin/gulp') // 执行gulp
然后将link先关掉 yarn unlink 再重启 yarn link 这样就可以在项目中使用wrk-gulp-integration build打包了
-------包装gulp cli end -----------------------------------------------------------------------
-------发布并使用 cli start -----------------------------------------------------------------------
发布前有个小问题，就是package.json中的files 需要把bin和lib都加上，这个发布需要的文件
yarn publish --registry https://registry.yarnpkg.com
这里需要注意的问题，就是如果没有npm的账号，需要注册一个，发布的时候，需要填写这些
-------发布并使用 cli end -----------------------------------------------------------------------