• 用gulp搭建并发布自己的cli脚手架


    准备工作 

    首先按照上节中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。 

    ---感谢阅读,o(* ̄︶ ̄*)o开心每一天!
  • 相关阅读:
    javascript入门经典(第五版)-清华出版社之“经典”错误
    在自学css开始就遇到问题,“链入外部样式表”在多浏览器显示问题
    sublime text3 =个人插件
    不错的文章
    Golang逃逸分析
    sublime常用快捷键
    同步机制之一--Synchronized,以及此机制下的锁的本质和种类
    UVa 10976
    LeetCode:Add Digits
    插入排序
  • 原文地址:https://www.cnblogs.com/websiteblogs/p/14370233.html
Copyright © 2020-2023  润新知