什么是generator-r2？
generator-r2是一个用于快速生成前端项目结构的npm包，其使用yeoman-generator进行构建。它基于gulp、bower、browserify等流行的前端工具，以及Bootstrap、jQuery等常用的前端框架和库。
generator-r2可以快速搭建一个基于gulp的开发流程，为开发者提供了一个快速构建前端项目的方便工具。
安装generator-r2
安装generator-r2只需在终端中输入以下命令：
npm install -g generator-r2
使用generator-r2创建项目
Step1：创建项目文件夹
首先，需要在本地创建一个文件夹，作为项目的根目录。打开终端，进入该目录，并使用以下命令：
yo r2
Step2：配置项目信息
在运行上述命令后，会提示输入一些项目信息，包括：
- 项目名称
- 项目描述
- 作者姓名
- 作者邮箱
- GitHub地址
- 是否启用less/sass编译器
- 是否启用TypeScript支持
输入完毕后，会有一个可视化的勾选框列表，列出了项目中选用的所需要的框架和库，这些框架和库包括：
- jQuery
- Bootstrap
- FontAwesome
- modernizr
- ie-shim
可以根据需求选择需要的框架和库，或者按下“Enter”键跳过。
Step3：生成项目结构
当所有配置信息填写完毕并选择相应的框架和库后，generator-r2就会快速生成一个基于gulp的项目结构，项目结构如下：
-- -------------------- ---- ------- -- --------- -- ---------- -- ----------- -- ------------ -- --------- -- ---- -- ---------- -- ----------- -- ---- -- ------ -- ---- -- --- -- ----- -- -------------
其中:
.jshintrc是一个JSHint配置文件；bower.json是用于Bower安装库的配置文件；gulpfile.js是用于Gulp构建工具的配置文件；package.json是存储应用程序模块的配置文件；README.md是应用程序的说明文档；app/是应用程序的源代码目录，包含了前端开发所需要的HTML、CSS、JavaScript等文件；css/是样式代码目录；fonts/是字体文件目录；img/是图片文件目录；js/是JavaScript代码目录；dist/是使用gulp build命令生成的交付目录，包含了压缩后的CSS、JavaScript和图片等文件；node_modules/是存储所需模块（包括generator-r2）的目录。
Step4：运行项目
当项目结构创建完成后，就可以运行项目了。可以使用以下命令运行项目：
gulp serve
此命令会在本地启动一个服务器，并打开浏览器，载入项目主页。
Step5：构建项目
当项目开发完成后，需要构建JavaScript文件和CSS文件，并将它们压缩到一个包中，以便交付给用户。可以使用以下命令构建项目：
gulp build
此命令会在dist/目录中生成压缩后的文件包。
总结
generator-r2是一个非常方便的npm包，可以快速搭建前端开发项目的基本框架。使用generator-r2可以避免手动创建项目而导致的浪费时间。同时，generator-r2使用了流行的前端工具和框架，为前端开发者提供了更好的开发体验。
使用generator-r2可能需要一定的了解前端开发的基础知识，例如gulp、bower、browserify等工具的使用，以及Bootstrap、jQuery等框架的使用等。
示例代码见generator-r2 GitHub页面。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005602781e8991b448de560