YEOMAN快速搭建前端项目结构

yeoman简介

记得去年在看慕课网上Materliu的一门课程Grunt-beginner前端自动化工具时，第一次接触到yeoman，当时有点不懂这玩意。最近在老师的另一门React实战–打造画廊应用再次使用到yeoman，只是我没有用yeoman而是选择了react官网的脚手架create-react-app去搭建项目。不过确认过眼神两次，我还是得把它记录下来。

在yeoman的官网，给出的一个定义是：THE WEB'S SCAFFOLDING TOOL FOR MODERN WEBAPPS，即现代web app的脚手架工具。其实就类似于vue的vue-cli,react的create-react-app，但他们只是专用的脚手架。项目开始阶段，使用yeoman来生成项目的文件和代码结构，yeoman自动将最佳实践和工具整合进来，大大加速和方便了我们后续的开发。

---

1.yeoman安装

yeoman官网

（1）首先是全局安装yeoman工具

npm install -g yo

（2）需要安装相应的生成器（generators）

生成器的npm包名普遍是generator-XYZ格式
比如我现在需要的是生成一个react项目，我们点击官网的discovering generators就可以搜索项目的generator，会有相应的安装教程。

现在我们安装一个生成器（会有详细说明和使用教程）

npm install -g generator-react-webpack

---

2.使用生成器搭建项目

# Create a new directory, and `cd` into it:
mkdir my-new-project && cd my-new-project

# Run the generator
yo react-webpack

---

3.运行项目

这个需要看你的项目，我们根据生成器说明和使用教程来使用。

---

4.最后介绍查看生成器的命令

npm ls -g --depth=0 2>/dev/null | grep generator-

npm ls -g 查看全局npm安装的包

--depth 0因为npm的包会依赖其他npm包，所以它是树状输出，一层一层比较难查看，所以这里限制树状结构展示层数

2>/dev/null >在我们bash中表示重定向, 单独的1表示标准输出，单独的2表示错误输出，/dev/null表示空设备,这里的是意思是将错误输出重定向到空设备，也就是过滤掉错误信息

| 是管道符， 将上一个命令的输出作为下一个命令的输入