首先附上Yeoman官网：yeoman.io/

我制作的前端脚手架：generator-jake-front

以及我在前端同学的分享会上的分享ppt：yeoman.key

如果想快速制作一个脚手架，并且不需要实现特别复杂的定制化，看完这篇文章足够，如果想要实现复杂的功能，需要去查看官方文档。

环境

需要安装Nodejs

全局安装需要的工具

npm install -g yo
npm install -g generator-generator复制代码

初始化项目

执行下面命令，执行之前并不需要自己新建文件夹，yo generator会帮助我们建好文件夹

yo generator复制代码

项目名称自己设置，必须是以generator-开头，协议选择MIT，在设置了一系列问题之后

自动生成如下目录

generator-test
├── LICENSE
├── README.md
├── __tests__
│   └── app.js
├── generators
│   └── app
│       ├── index.js
│       └── templates
│           └── dummyfile.txt
└── package.json复制代码

配置

generators/app/templates/是默认存放文件的目录，把所有模版文件放在这个目录下

/generators/app/index.js是Yeoman的配置文件，定义如何生成我们的脚手架

prompting

Prompts是generator与用户交互的主要方式。prompt模块由 Inquirer.js提供，你可以参考它的API，在可用的提示选项列表。

prompt方法是异步的并且返回一个 promise。在你运行下一个任务前去完成它，你需要返回 promise。

module.exports = class extends Generator {prompting() {// Have Yeoman greet the user.this.log(yosay('Welcome to the awe-inspiring ' + chalk.red('generator-downloads') + ' generator!'));const prompts = [{type: 'confirm',name: 'someAnswer',message: 'Would you like to enable this option?',default: true}];return this.prompt(prompts).then(props => {// To access props later use this.props.someAnswer;this.props = props;});}
};复制代码

做一些适当的修改，实现更通用的脚手架。可以查阅API

this.appname: 获取当前文件夹名称
this.user.git.name(): 获取全局git用户名
this.user.git.email(): 获取全局git邮箱
this.github.username(): 获取github用户名

定义对象中的type，管理交互方式。使用input实现控制台输入。

type: 'input',
name: 'author',
message: 'author',
default: this.user.git.name()复制代码

这样便实现了让用户输入作者名称，默认为git全局配置的用户名。然后在其他配置中使用this.props.author实现获取用户输入。

writing

Generators在this.fs暴露了所有的文件的方法，这是一个实例，mem-fs editor - 确保为所有可获得的方法选择模块文件。

值得注意的是，通过this.fs暴露commit，你不应该在你的generator去调用它。Yeoman在运行循环的冲突阶段结束后，在内部调用它。

复制一个模板文件

例如：./templates/index.html的文件内容是：

<html><head><title><%= title %></title></head>
</html>复制代码

然后，我们将使用copyTpl方法去复制作为模板的处理中的文件。copyTpl使用的是ejs 模板引擎。

module.exports = class extends Generator {writing() {this.fs.copy(this.templatePath('index.html'),this.destinationPath('index.html'),{ title: 'Templating with Yeoman' });}
};复制代码

一旦generator运行成功，index.html将会包含：

<html><head><title>Templating with Yeoman</title></head>
</html>复制代码

json也同样适用上面的语法，配置package.json文件可以适应不同的项目。

install

install方法设置在文件copy完成之后执行的命令，例如

module.exports = class extends Generator {
install() {
this.installDependencies({bower: true,npm: true,yarn: false,callback: function () {this.log('Everything is ready!');}});}
};复制代码

测试

由于我们在本地开发，并不知道用起来怎么样，所以可以使用npm link命令，相当于在全局安装了此脚手架，然后在新文件夹中执行yo，选择脚手架，便可以测试

发布

generator-test/package.json中的name要在www.npmjs.com/没被创建过，才可以发布。

发布需要一个npm的账号，如果没有使用npm adduser创建；

如果已有账号，运行npm login登陆。

在项目根目录下，运行npm publish就可以发布了。如果更新后重新发布，注意修改根目录下的package.json文件中的版本号。

使用npm unpublish 包名命令可以撤销发布，只有在发包的24小时内才允许撤销发布的包。

使用Yeoman定制前端脚手架相关推荐

基于gulp的前端脚手架（二）
几天前搭了个小型的gulp自动化脚手架,运用到实际项目中发现还有一些小问题,今天来统一修复一下. 文章链接基于gulp的前端脚手架(一) 存在的问题雪碧图相关 1.使用2倍图后,若2倍图尺寸不是1 ...
手写一个合格的前端脚手架
为什么我们需要一套脚手架为什么我们需要一套脚手架,它能帮助我们解决哪些痛点问题. •前端项目配置越来越繁琐.耗时,重复无意义的工作•项目结构不统一.不规范•前端项目类型繁多,不同项目不同配置,管理成 ...
npm 全局安装vuecli报错_前端脚手架CLI生成模版命令工具（包括，npm包的发布，脚手架的搭建，注意事项，优化等）...
NodeJs的出现,让前端工程化的理念不断深入,正在向正规军靠近.先是带来了Gulp.Webpack等强大的构建工具,随后又出现了vue-cli和create-react-app等完善的脚手架,提供了 ...
前端脚手架是指什么？
前端脚手架是指什么? 前端开发中提bai到的"脚手架"是一个形象的比喻,比喻各类语言的前期工作环境. 在软件开发上(当然也包括前端开发)的脚手架指的就是:有人帮你把这个开发过程中要 ...
php 脚手架,thinkphp集成前端脚手架Vue-cli的教程图解
本文主要介绍怎么在Thinkphp中集成后台前端脚手架框架Vue-Cli. 一.安装Vue-Cli到Thinkphp中 1.1.1 检查是否安装node 终端输入npm的指令如果没有安装的话会提示未找 ...
从0搭建前端脚手架详解（小白也可以搭建）
本篇文章用来为大家提供一个搭建简易前端脚手架的思路. 先来看一眼实现的效果. 从图上来看这个脚手架的功能非常的简单只有一个创建的命令,其他都是帮助和显示版本号的. 也就是上图这句,创建一个新项目,只需 ...
前端脚手架搭建（part 1）
本篇主要介绍如何搭建前端脚手架,一步一步地实现通过搭建的脚手架下载对应的项目模板. 通过脚手架的创建,可以快速搭建项目的基础配置和模板,在部门项目开发的规范中尤其总要. 初始化项目: 创建一个文件夹, ...
yazi 前端脚手架
前端自动化工程 Installation sudo npm install -g yazi Getting To Know yazi 初始化前端脚手架 init yazi mb init yazi p ...
什么是前端脚手架？脚手架原理？
一.站在前端研发的视角,分析开发脚手架的必要性研发效能开发脚手架的核心目标是:提升前端的研发效能大厂研发一定需要用到脚手架脚手架核心价值将研发过程: 自动化:项目重复代码拷贝/git 操作/ ...

使用Yeoman定制前端脚手架

环境