generator-nrrb 是一个基于 Yeoman 的前端脚手架生成器,可以快速创建一个基础的前端项目模板,包括文件结构、自动化构建、自动化任务等等。在使用 generator-nrrb 前,需要先安装 Yeoman,详细请参考 Yeoman 官网。
安装
使用如下命令可以安装 generator-nrrb:
--- ------- -- --------------
这会在全局环境下安装 generator-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:
--- ------- -- -------------- --
- 创建一个新项目:
----- ---------- -- ---------- -- ----
- 安装 jQuery:
--- ------- ------ ------
- 在
src/js/app.js
中引入 jQuery:
------ - ---- --------- ---------- -- - ------------------- --------- ---
- 在
src/index.html
中引入 JS 文件:
------ ------- -------------------------------- ------- ------------------------- -------
- 构建项目:
----
- 在浏览器中查看项目:
---- -----
以上为 generator-nrrb 快速创建前端项目的基本流程和应用示例,并介绍了自动化构建的相关应用,希望对初学者总结一些经验。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/60055eab81e8991b448dc1d2