generator-nrrb 是一个基于 Yeoman 的前端脚手架生成器，可以快速创建一个基础的前端项目模板，包括文件结构、自动化构建、自动化任务等等。在使用 generator-nrrb 前，需要先安装 Yeoman，详细请参考 Yeoman 官网。
安装
使用如下命令可以安装 generator-nrrb：
npm install -g generator-nrrb
这会在全局环境下安装 generator-nrrb，可以在任何地方使用。
使用
创建一个新项目时，在终端进入项目的根目录，输入如下命令：
yo nrrb
此时会启动 generator-nrrb 并开始创建基础项目。
项目结构
generator-nrrb 创建的项目结构如下：
-- -------------------- ---- ------- --- --------- --- ------------- --- ------------ --- ---- - --- ---- - - --- --------- - --- --- - - --- ------ - - --- ---- - - --- --------- - --- ---- - --- ---------- --- ----------- --- ---------- --- -------------
其中，src 是源文件目录，gulpfile.js 是自动化构建脚本。你可以根据自己的需求修改项目结构。
自动化构建
generator-nrrb 使用 Gulp 进行自动化构建，具体任务如下：
clean: 清空 dist 目录css: 编译 Sass，压缩 CSS，生成 sourcemap，输出到 dist/css 目录js: 编译 ES6，压缩 JS，生成 sourcemap，输出到 dist/js 目录img: 压缩图片，输出到 dist/img 目录html: 压缩 HTML，输出到 dist 目录serve: 启动服务器，在浏览器中查看已构建的项目default: 依次运行clean，css，js，img，html任务
示例代码
下面是一个简单的示例，演示如何使用 generator-nrrb 创建一个基础的前端项目，并引入 jQuery 库。
- 安装 generator-nrrb 和 Yeoman：
npm install -g generator-nrrb yo
- 创建一个新项目：
mkdir my-project cd my-project yo nrrb
- 安装 jQuery：
npm install jquery --save
- 在
src/js/app.js中引入 jQuery：
import $ from 'jquery';
$(function () {
console.log('Hello, World!');
});- 在
src/index.html中引入 JS 文件：
<body> <script src="js/lib/jquery.js"></script> <script src="js/app.js"></script> </body>
- 构建项目：
gulp
- 在浏览器中查看项目：
gulp serve
以上为 generator-nrrb 快速创建前端项目的基本流程和应用示例，并介绍了自动化构建的相关应用，希望对初学者总结一些经验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055eab81e8991b448dc1d2