1. 安装node.js、git、yeoman,这里只介绍yeoman
Yeoman其实是三个工具的集合：YO、GRUNT、BOWER，这三个工具是分别独立开发的，但需要配合使用，来实现我们更高效的工作流模式。效率和规范是yeoman的核心诉求。
YO：Yeoman核心工具，项目工程依赖目录和文件生成工具，项目生产环境和编译环境生成工具。
GRUNT：grunt去年很火，前端构建工具，jquery就是使用这个工具打包的。
BOWER：Web开发的包管理器，概念上类似npm，npm专注于nodeJs模块，而bower专注于CSS、JavaScript、图像等前端相关内容的管理。
以下命令一并安装这三个工具：
npm install -g yo grunt-cli bower //全局安装
yo --version&&grunt --version&&bower --version //查看是否安装成功
6.png
2. 使用 yo下载一个webapp generator
输入以下命令：
yo
2.png
上下移动选择Install a generator,按回车键表示确认。
4.png
在Search npm for generators:后输入webapp,它会为你找出所有的符合条件的generator模板。这里我选择的是第二个webapp,按回车开始下载webapp generator。
5.png
下载成功后你会发现Run a generator里有了一个Webapp,它安装在全局里，你可以在node模块中找到它。
熟练后也可直接输入以下命令安装generator-webapp
npm install -g generator-webapp
当Install a generator出错时可能是yo、node、npm环境问题。
输入以下命令
yo doctor
它会帮你检测出问题，并提示你如何做出修改，没问题的话如下图所示。
7.png
创建一个项目目录，并cd到该目录，利用webapp generator快速生成一个webapp项目模板
yo webapp
后面会出现一些问答，根据自己的需求进行选择，space键当前选项反选，i键全部选项反选，选择后回车确认便开始下载了。没有出现问题就代表下载成功了，你可以在当前目录看到webapp目录结构。
3.自定义generator
Yeoman 给我们提供了一个用来写脚手架的脚手架 generator-generator，我们可以执行命令下载它。
yo generator-generator
首先创建一个文件夹存放generator，并cd到该目录
yo generator
问答回复如下图，假设我要写一个 Generator 叫做 ys，根据Yeoman 的规定，你需要将这个 node 模块的名字命名为 generator-*，所以我命名为 generator-ys。keywords必须包含“yeoman-generator”。
8.png
回车即开始下载generator模板,下载成功后你可以在当前目录中找到generator-ys文件夹。
我们得到的generator目录
├── generators/
│ └── app/
│ ├── index.js
│ └── templates/
│ └── dummyfile.txt
├── .editorconfig
├── .gitattributes
├── .gitignore
├── .eslintrc
├── .travis.yml
├── .yo-rc.json
├── package.json
├── gulpfile.js
├── README.md
├── LICENSE
└── test/
└── app.js
它并没有全局安装到node模块中，运行以下命令就可以在全局中使用。
cd generator-ys
npm link
进入之前的存放工程目录mypoject
mkdir generator-ys
cd generator-ys
npm init //帮你生成package.json
bower init //帮你生成bower.json
9.png
10.png
你也可以进入这两个文件更改这些信息。其中npm里的description必填、keywords必须包含“yeoman-generator”、repository必填（我这里乱填的，先确保不报错）
现在可以开始使用generator-ys这个脚手架了，只是生成的目录里没啥内容。
yo ys
4. 往generator-ys里添加内容
11.png
我们的generator生成什么样的基础工程，目录结构，是否自动安装依赖模块等等都是在index.js文件完成的。可以先浏览下里面内容，然后把里面的内容删掉照着下面步骤来。
（1）继承generator
Yeoman提供基类generator,你可以继承它并实现自己的方法
'use strict';
var Generator = require('yeoman-generator');
module.exports = class extends Generator {
//以下大部分内容将会写在里面
};
（2）构造函数
constructor(args, opts) {
super(args, opts);
}
（3）初始化函数
initializing() {
this.props = {}; //定义这个后面会用到
this.log('初始化完成');
}
（4）promoting块
//promts是问题集合，在调用this.promt使其在运行yo的时候提出来
prompting() {
// 拥有一个Yeoman图形欢迎
this.log(yosay(
'Welcome to the impressive ' + chalk.red('generator-ys') + ' generator!'
));
//promts是问题集合，在调用this.promt使其在运行yo的时候提出来
return this.prompt([{
type : 'input',
name : 'appname',
message : 'give Your project a name',
default : this.appname //appname是内置对象，代表工程名，这里就是ys
}, {
type : 'confirm',
name : 'cool',
message : 'Would you like to enable the Cool feature?'
},
{
type: 'input',
name: 'projectDesc',
message: 'Please input project description:'
},
{
type: 'list',
name: 'projectLicense',
message: 'Please choose license:',
choices: ['MIT', 'ISC', 'Apache-2.0', 'AGPL-3.0']
},
{
type : 'input',
name : 'username',
message : 'What\'s your GitHub username', //里面的单引号需要转义
store : true
}
//打印出answers回复内容
]).then((answers) => {
this.log('appname ：', answers.appname);
this.log('cool feature ：', answers.cool);
this.log('username ：', answers.username);
this.log('projectDesc ：', answers.projectDesc);
this.log('projectLicense ：', answers.projectLicense);
//最后将用户输入的数据存在this.props中，以方便后面调用。
this.props = answers;
})
}
（5）default块
defaults () { //判断工程名同名文件夹是否存在，不存在则自动创建
if (path.basename(this.destinationPath()) !== this.props.appname) {
this.log(
'Your generator must be inside a folder named ' + this.props.appname + '\n' +
'I\'ll automatically create this folder.'
);
//mkdirp是我们引用的模块，用来创建文件夹,此时没有设置项目根目录，则在当前目录创建
mkdirp(this.props.appname);
//this.destinationRoot则是设置要创建的工程的根目录为工程名文件夹。
this.destinationRoot(this.destinationPath(this.props.appname));
}
}
（6）write
先在templates下创建文件夹public,在public下添加index.html和index.js文件(后面会用到)
17.png
writing() {
//在根目录下创建这些文件夹
mkdirp('lib/3');
mkdirp('lib/2');
mkdirp('lib/1');
mkdirp('public');
mkdirp('src');
//复制templates目录中的index.html、index.js到目标目录（先在templates里创建这两个文件）
this.fs.copy(
this.templatePath('public/index.html'),
// returns './templates/public/index.html'
this.destinationPath('public/index.html'),
{ title: '首页' } //index.html中绑定了title,html标题设为“首页”
),
this.fs.copy(
this.templatePath('public/index.js'),
// returns './templates/public/index.js'
this.destinationPath('public/index.js')
);
}
(7)install
install() {
//使用npm安装依赖lodash和jquery
this.npmInstall(['lodash'], { 'save-dev': true });
this.npmInstall(['jquery'], { 'save-dev': true });
}
};
到这里一个有内容的generator创建出来了
在工程目录下运行
yo ys
初始化函数调用与Yeoman图形欢迎
13.png
promoting块问答阶段
14.png
创建文件复制文件阶段
15.png
安装依赖
16.png
到此项目生成完成了，你可以进入当前目录查看。
网友评论