准备工作
首先按照上节中gulp顺序安装的那个工程(代号A) 删除掉node_modules
然后创建一个luckydog的空文件夹(代号B) 按照脚手架模板安装之后(用脚手架模板安装比较快点),上传到github
yarn global add zce-cli(zce-cli是未完成的一个脚手架模板,与上节gulp中那个工程类似)
zce init nm luckydog
cd luckydog
git init
git remote add origin https://github.com/1512955040/luckydog.git
git status
git add .
git commit -m "feat:initial commit"
git push -u origin master
把A文件夹中把开发环境的依赖复制到luckydog(B)文件夹package.json中的生产环境中,原因工作环节安装依赖只会安装生成环境
的依赖,package.json复制完成后,回到A,把之前的gulpfile.js文件里面的内容删除掉,把package.json里面的devDependencies里面的
东西清空掉。
yarn (B安装依赖)
yarn link (link到全局)
yarn link "luckydog" (A文件夹运行)
在A模块缺少入口文件gulpfile.js内容,如下图所示我们在B模块lib下导出的实际上就是gulpfile.js的内容
在A中gulpfile.js入口文件导入B模块 module.exports=require("luckydog")
因为之前把node_modules依赖全部删除掉了,所以需要yarn安装开发环境的几个依赖包
yarn (A)
由于A中缺少gulp,yarn add gulp-cli --dev 安装gulp-cli
A中本地安装gulp yarn add gulp --dev
把工程中写死的路径更改为变量替换的路径,创建pages.config.js文件中,把项目中的变量放到pages.config.js中,页面调用。
项目运行到此处还可以继续封装,在图中可以看出,gulpfile.js中只有一句代码,感觉意义并不是很大gulpfile.js引用的路径实际上是
luckydog里面lib里面的index.js,
我们试着在终端运行yarn gulp build --gulpfile ./node_modules/lib/index.js 跟直接运行yarn build效果是一样的这样运行代码,已经把lib
目录变成gilpfile的目录了,而不是根目录了,
把gulp完全包装到luckydog (B) 这个模块当中,在B中创建bin目录创建luckydog.js文件,作为cli的执行入口既然作为cli的执行入口,文件中
创建标识#!/usr/bin/env node,以及运行所需要的参数。
process.argv.push('--cwd')
process.argv.push(process.cwd())
process.argv.push('--gulpfile')
process.argv.push(require.resolve('..'))
requre('gulp/bin/gulp')
要在package.json中创建 "bin":"bin/luckydog.js",
yarn unlink
yarn link 注册到全局
在A目录运行luckydog build,没问题,这样我们就不需要安装gulp,这就相当与把gulp完全集成到项目中。
发布并使用模块
git add .
git commit -m "feet:update package"
git remote add origin https://github.com/1512955040/luckydog.git
git push -u origin master
yarn publish (发布到npm)
备注:把每一步都记录清楚感觉不太现实,建议自己去手动搭建下,代码以上传至github,地址:https://
github.com/1512955040/luckydog.git。npm服务器地址为:https://www.npmjs.com/package/luckydog。