对于一个项目组，甚至说一些公司对于整个前端的架构都有一定的要求，解决方案架构组或者前端技术架构组往往会推出一套自动化构建的工作流。那么当我们制定好了这么一套工作流，如何封装起来，使得大家在项目的开始都能应用上。那么本篇文章就是为了解决这么一个问题。

创建一个cli项目

• 创建一个lib目录，目录下创建一个index.js文件，内容为我们之前的gulpfile.js
• 将我们上次项目值介绍的插件添加到本次项目的dependencies

  "dependencies": {
    "@babel/core": "^7.5.5",
    "@babel/preset-env": "^7.5.5",
    "browser-sync": "^2.26.7",
    "del": "^5.1.0",
    "gulp": "^4.0.2",
    "gulp-babel": "^8.0.0",
    "gulp-clean-css": "^4.2.0",
    "gulp-htmlmin": "^5.0.1",
    "gulp-if": "^3.0.0",
    "gulp-imagemin": "^6.1.0",
    "gulp-load-plugins": "^2.0.1",
    "gulp-sass": "^4.0.2",
    "gulp-swig": "^0.9.1",
    "gulp-uglify": "^3.0.2",
    "gulp-useref": "^3.1.6"
  },

• npm install & npm link
• 那么就可以在我们新的项目中通过 npm link <项目名>

项目应用

• 我们新项目中的gulpfile.js就可以通过导出我们link模块的形式使用

module.exports = require("zicoo-gulp-cli")

这个时候当我们满心以为yarn gulp build没有问题了的时候

yarn gulp build
yarn run v1.22.10
error Command "gulp" not found.

然后我们再去yarn add gulp gulp-cli

yarn gulp build
yarn run v1.22.10
build
Starting 'build'...
Finished 'build' after 1.59 s
✨  Done in 3.29s.

成功啦！！
由于我们之前的项目用所使用的路径为之前项目的路径并且像我们日常使用的这种工作流或者脚手架来说都会有配置项，因此我们只需要将之前写死的目录封装成一个对象，在根目录下创建一个config文件目的是用户可以自定义配置这些对象的属性，在我们的lib下的index.js中也留有一个默认数据，并且 require引入我们新建的对象的文件。让新配置对象去覆盖默认对象。注意我们这里用的是覆盖，因为自定义配置中的项目可能不会配置完全。

包装Gulp Cli

我们再刚才的测试用发现我们已经已经使用了我们封装的这个模块，为什么还得去安装gulp并且还得需要gulpfile.js，很显然我们的封装还不是很完善。因此我们需要取进一步包装一下我们的cli。
我们使用的gulpfile.js其实本身就是cli的lib目录下的index.js,所以我们可以尝试去先使用命令行的形式先去指定一下gulpfile这个文件的最终使用地址

yarn gulp build --gulpflie ./node_moudle/<cli项目名>/lib/index.js

我们发现它实际build目录是lib这个目录，所以需要我们再重新指定一下workdir(工作目录)。

yarn gulp build --gulpflie ./node_moudle/<cli项目名>/lib/index.js --cwd .

这个时候我们发现运行是正常的。达到了我们的目的。
要想让我们指定的工作流像cli一样执行，需要我们创建一个bin目录，目录中自定义命名一个js文件，比如zicoo-cli.js。因此我们还需要在package.json中指向一下我们cli的可执行文件。

"bin": "bin/zicoo-cli.js"

当我们再去npm link的时候，就可以只写使用项目名去执行。
我们可以看一下gulp的cli源文件，执行gulp的时候本身就是执行了gulp-cli

image.png

#!/usr/bin/env node
process.argv.push("--cwd")
process.argv.push(process.cwd())
process.argv.push("--gulpfile")
process.argv.push(require.resolve("..")) //代表着从我们的bin的上层目录去找package.json文件中指向的gulpfile

require("gulp/bin/gulp")

我们可以使用process.argv来获取执行命令的参数，并且gulp.cmd这个文件可以看出本身就是执行一段node命令，因此我们只需要把参数push到命令参数里就可以了。

执行 zicoo-gulp-cli build 成功完成打包 nice~

发布

yarn publish --registry https://registry.yarnpkg.com

发布完成后需要等待同步，之后我们就可以直接使用 yarn或者npm去拉取我们的模块使用了。