美文网首页
Yeoman使用

Yeoman使用

作者: 老奶瓶 | 来源:发表于2020-02-29 14:40 被阅读0次

https://yeoman.io/

制作脚手架工具

安装
npm install -g yo
版本
yo --version

创建构建器

https://github.com/yeoman/generator-generator

安装
npm install -g generator-generator

新建项目目录,把你想构建的文件拷贝进来

构建
yo generator

初始化参数
? Your generator name generator-zztest-gulp
Your generator must be inside a folder named generator-zztest-gulp
I'll automatically create this folder.
? Description this is a gulp simple project
? Project homepage url 
? Author's Name oldninepinng
? Author's Email 2508031513@qq.com
? Author's Homepage 
? Package keywords (comma to split) gulp browsersync sass uglify
? Send coverage reports to coveralls Yes
? Enter Node versions (comma separated) 10.16
? GitHub username or organization zhangzhuangsimida
? Which license do you want to use? MIT

https://yeoman.io/authoring/running-context.html

将你要构建的文件(就是要重复构建的)下载到generator-项目名-gulp/generators/app/templates

修改generator-项目名-gulp/generators/app/templates/index.js文件

...
writing() {
  this.fs.copy(
    this.templatePath('**'),//复制template下的所有文件
    this.destinationPath('./')//输出在当前目录下
  );
}
...

使用脚手架

cd generator-zztest-gulp
npm link //将脚手架link到全局
mkdir demo-dest
yo zztest-gulp //脚手架名称,这里不需要加generator做开头了

这里bower会报错,官方已经不推荐了,所以还要在generator-项目名-gulp/generators/app/templates/index.js中增加参数让项目默认使用npm构建

...
install() {
    this.installDependencies({
      bower: false
    });
  }
...

生命周期

  1. initializing - Your initialization methods (checking current project state, getting configs, etc)
  2. prompting - Where you prompt users for options (where you’d call this.prompt())
  3. configuring - Saving configurations and configure the project (creating .editorconfig files and other metadata files)
  4. default - If the method name doesn’t match a priority, it will be pushed to this group.
  5. writing - Where you write the generator specific files (routes, controllers, etc)
  6. conflicts - Where conflicts are handled (used internally)
  7. install - Where installations are run (npm, bower)
  8. end - Called last, cleanup, say good bye, etc

NPM发布

注册https://www.npmjs.com/signup
邮箱验证

nrm切换官方源

nrm use npm
npm login 登陆npm

cd 项目根目录(generator-zztest-gulp)  
这里的package.json version字段一定要大于1.0.0

npm publish //推送到npm

发布成功

https://www.npmjs.com/package/generator-zztest-gulp

相关文章

  • yeoman+webpack+react

    yeoman+webpack+react yeoman 脚手架工具,项目开始阶段,使用yeoman来生成项目的文件...

  • yeoman自定义脚手架工具

    yeoman的安装和基础使用 安装yeoman 安装对应的generator 通过yo运行generator 自定...

  • 前端工程化系列[07] Yeoman-generator的创建

    在Yeoman脚手架使用入门和Yeoman脚手架核心机制这两篇文章中已经对Yeoman脚手架工具的基本使用以及去核...

  • Yeoman使用

    https://yeoman.io/ 制作脚手架工具 创建构建器 https://github.com/yeoma...

  • Yeoman

    初步使用Yeoman 1.全局安装Yeoman 安装对应的generator 3.通过yo运行generator,...

  • Grunt - Yeoman

    什么是Yeoman? 现代 Web App 的脚手架工具 Yeoman 的作用 在 Web 项目的立项阶段,使用 ...

  • 前端工程化系列[06] Yeoman脚手架核心机制

    在前端工程化系列[05] Yeoman脚手架使用入门这边文章中,对Yeoman的使用做了简单的入门介绍,这篇文章我...

  • Yeoman的使用

    仅作为拉勾教育的学习记录 前端工程化主要解决的问题 传统语言或语法的弊端 无法使用模块化/组件化 重复的机械式的工...

  • 2019-04-27

    Yeoman安装 使用模块 使用LiquiBase管理数据库的迁移 Validation Failed diff命...

  • Yeoman 安装及使用

    Yeoman介绍 Yeoman主要有三部分组成:yo(脚手架工具)、grunt(构建工具)、bower(包管理器)...

网友评论

      本文标题:Yeoman使用

      本文链接:https://www.haomeiwen.com/subject/zwvphhtx.html