构建工具前端【免费下载链接】brunch Web applications made easy. Since 2011.项目地址https://gitcode.com/gh_mirrors/br/brunch点击查看免费下载导读本指南围绕 brunch-with-chaplin 骨架内置的生成器集合展开说明如何借助 Scaffolt 一次性生成 Chaplin 架构下的 View、Controller、Model、Collection、模板与样式文件。读完本文你将掌握生成器的安装与命令行用法、10 类生成器的输出映射与模板语法并能在实际项目中复用这套代码脚手架快速搭建页面模块。一、什么是「生成器Generators」在brunch-with-chaplin骨架中generators/目录存放的是一组面向Scaffolt的生成器。Scaffolt 是一个命令行代码生成工具它为每个生成器维护一份清单generator.json和若干 Handlebars 模板.hbs执行命令时按清单把模板渲染到目标位置从而把「手写样板代码」变成「一条命令」。这些生成器并非 Brunch 本身的功能而是骨架为开发效率附加的工具层。骨架 README 强调该骨架「Requires Brunch 1.7」且采用 CommonJS 模块体系而非 AMD生成器产出的require views/base/view一类路径正是遵循这一模块约定的结果。二、安装与基本用法原文档给出了安装命令与三个典型用法见 generators/README.mdnpm install -g scaffoltscaffolt view user scaffolt view user -r scaffolt controller header -p controllers/regions对这三个示例的逐条解读scaffolt view user以user为名称参数运行view生成器。依据 view 生成器清单会在app/views/user-view.coffee生成一个UserView类scaffolt view user -r追加-r开关的调用形态用于对生成结果做二次处理其语义由 Scaffolt 命令行定义此处保持原文档示例原样scaffolt controller header -p controllers/regions通过-p参数指定自定义输出路径controllers/regions用于把header控制器输出到指定目录适合需要调整默认app/controllers/布局的场景。三、生成器清单10 类生成器与输出映射generators/目录下共 10 个生成器每个目录包含generator.json输出清单与若干.hbs模板文件汇总如下生成器清单文件模板文件默认输出位置viewgenerator.jsonview.coffee.hbsapp/views/{{name}}-view.coffeecontrollergenerator.jsoncontroller.coffee.hbsapp/controllers/{{name}}-controller.coffeemodelgenerator.jsonmodel.coffee.hbsapp/models/{{name}}.coffeecollectiongenerator.jsoncollection.coffee.hbsapp/models/{{pluralName}}.coffeecollection-viewgenerator.jsoncollection-view.coffee.hbsapp/views/{{name}}-view.coffeetemplategenerator.jsonempty占位文件app/views/templates/{{name}}.hbsstylegenerator.jsonstyle.styl.hbsapp/views/styles/{{name}}.stylscaffoldgenerator.jsoncontroller.coffee.hbs、route.coffee.hbs控制器 追加app/routes.coffee 多个依赖生成generatorgenerator.jsongenerated_file.coffee.hbs、generator.json.hbs生成新的生成器自举view-templategenerator.json—视图模板类生成器的声明清单文件统一采用如下 JSON 结构files数组声明「从模板from到输出to」的映射其中to支持{{name}}、{{pluralName}}等变量scaffold还额外使用了method: append与dependencies两个字段详见第五节。四、模板语法与命名约定所有.hbs模板由 Scaffolt 渲染核心变量与帮助函数如下{{name}}命令行传入的生成器名称如scaffolt view user中的user{{pluralName}}名称的复数形式用于 Collection 类与路由批量命名{{#camelize}}...{{/camelize}}Handlebars 帮助函数把user这类命名转为驼峰User用于拼接类名。以view生成器为例其模板 view.coffee.hbs 完整内容为View require views/base/view module.exports class {{#camelize}}{{name}}{{/camelize}}View extends View template: require ./templates/{{name}}执行scaffolt view user后渲染结果即app/views/user-view.coffeeView require views/base/view module.exports class UserView extends View template: require ./templates/user可以看到类名自动驼峰为UserView且模板声明template: require ./templates/user与template生成器输出到app/views/templates/user.hbs的约定天然对应——这就是「view template」两条命令协作的完整链路。五、逐个生成器源码解析5.1 model 与 collectionmodel.coffee.hbs 生成继承models/base/model的空 ModelModel require /models/base/model module.exports class {{#camelize}}{{name}}{{/camelize}} extends Modelcollection.coffee.hbs 则生成 Collection 并声明其model属性指向对应 Model注意{{name}}与{{pluralName}}的配合Collection require models/base/collection {{#camelize}}{{name}}{{/camelize}} require ./{{name}} module.exports class {{#camelize}}{{pluralName}}{{/camelize}} extends Collection model: {{#camelize}}{{name}}{{/camelize}}5.2 controller 与 collection-viewcontroller.coffee.hbs 生成继承controllers/base/controller的控制器类名采用{{pluralName}}的驼峰形式Controller require controllers/base/controller module.exports class {{#camelize}}{{pluralName}}{{/camelize}}Controller extends Controllercollection-view.coffee.hbs 生成列表视图继承views/base/collection-view并把itemView指向对应的单条{{name}}ViewCollectionView require views/base/collection-view {{#camelize}}{{name}}{{/camelize}} require views/{{name}}-view module.exports class {{#camelize}}{{pluralName}}{{/camelize}}View extends CollectionView itemView: {{#camelize}}{{name}}{{/camelize}}5.3 template 与 styletemplate生成器generator.json把名为empty的占位文件复制为app/views/templates/{{name}}.hbs为后续手写模板预留空文件style生成器generator.json style.styl.hbs输出到app/views/styles/{{name}}.styl模板内容为一行import nib即自动引入 Nib 样式工具库。5.4 scaffold一键生成完整页面模块scaffold是本套生成器中功能最强的组合式生成器。其 generator.json 做了三件事生成控制器渲染 controller.coffee.hbs输出app/controllers/{{name}}-controller.coffee追加路由把 route.coffee.hbs 以method: append方式追加到app/routes.coffee注意是追加而非覆盖声明依赖dependencies数组第 13-28 行递归触发 9 个子生成覆盖model、collection、两条记录的view/style/template{{name}}-item与{{name}}-page以及列表的collection-view/style/template{{pluralName}}。生成的控制器自带两个 action见 controller.coffee.hbsController require controllers/base/controller {{#camelize}}{{name}}{{/camelize}} require models/{{name}} {{#camelize}}{{name}}{{/camelize}}PageView require views/{{name}}-page-view {{#camelize}}{{pluralName}}{{/camelize}}Collection require models/{{pluralName}}-collection {{#camelize}}{{pluralName}}{{/camelize}}CollectionView require views/{{pluralName}}-collection-view module.exports class {{#camelize}}{{pluralName}}{{/camelize}}Controller extends Controller index: - collection new {{#camelize}}{{pluralName}}{{/camelize}}Collection() view new {{#camelize}}{{pluralName}}{{/camelize}}CollectionView {collection} collection.fetch().then view.render show: (params) - model new {{#camelize}}{{name}}{{/camelize}} id: params.id view new {{#camelize}}{{name}}{{/camelize}}PageView {model} model.fetch().then view.render追加到路由文件的两行route.coffee.hbsmatch {{pluralName}}, {{pluralName}}#index, name: {{pluralName}} match {{pluralName}}/:id, {{pluralName}}#show, name: {{name}}, constraints: {id: /^\d$/}可见 scaffold 直接产出一个「列表 详情」可用的完整 CRUD 雏形index创建 Collection 并 fetch 后渲染列表视图show根据params.id创建 Model 并渲染详情页路由约束id: /^\d$/保证了详情页参数为纯数字。5.5 generator 与 view-templategenerator/目录含generator.json、generated_file.coffee.hbs、generator.json.hbs从文件结构看是一个「生成生成器」的自举模板它把generator.json.hbs渲染为新的generator.json把generated_file.coffee.hbs渲染为新的模板文件适合团队按需定制自己的生成器view-template/目录仅含 generator.json 一个清单文件用于声明视图模板类生成器的输出映射。六、生成器如何融入 Chaplin 骨架架构生成器产出的代码之所以能直接运行是因为它们全部继承自骨架内置的基类路径约定与骨架 app/ 目录 一一对应views/base/view、views/base/collection-view位于app/views/base/提供视图生命周期与内存管理骨架特性中强调的「Strict memory management and object disposal」即由此承载controllers/base/controller位于app/controllers/base/封装控制器基础行为models/base/model、models/base/collection位于app/models/base/扩展 Backbone 基础类以避免重复代码。模板require ./templates/{{name}}之所以可用依赖骨架的 Brunch 编译管线app/views/templates/*.hbs会被预编译为 CommonJS 模块。这与骨架 README 中「CoffeeScript Stylus Handlebars 作为应用语言」「CommonJS 替代 AMD」的特性描述一致。值得一提的是仓库中 twitter 示例的 generators 目录是这套模式的扩展版在同类生成器基础上增加了collection_test、controller_test、model_test、view_test等测试生成器并沿用generator.json.hbs的同一套机制可作为自定义生成器的对照参考。七、使用建议与注意事项先装 Scaffolt 再使用生成器命令依赖全局安装的scaffolt安装后可直接在骨架项目根目录执行命名即约定{{name}}决定类名驼峰、文件名与模板路径建议命名使用单数小写形式如user复数形式{{pluralName}}由 Scaffolt 推断生成用于 Collection 与路由scaffold 会追加路由其method: append行为会持续向app/routes.coffee追加match行多次执行同一 scaffold 会重复追加需自行留意去重生成器可扩展参考 generator 自举生成器的结构可以复制一套generator.json.hbs为团队定制新的代码模板输出的目标路径通过files[].to灵活控制配合-p参数即可调整目录布局本套生成器面向 CoffeeScript 骨架模板输出均为.coffee、.styl、.hbs若使用仓库内的 brunch-with-chaplin-js 骨架则需要对应调整模板语言。赞分享构建工具前端【免费下载链接】brunch Web applications made easy. Since 2011.项目地址https://gitcode.com/gh_mirrors/br/brunch点击查看免费下载相关推荐Brunch with Chaplin 骨架项目实战指南基于 Brunch 与 Chaplin 的 HTML5 应用脚手架Brunch with Chaplin 骨架项目实战指南基于 Brunch 与 Chaplin 的 HTML5 应用脚手架 本指南以当前仓库 packages构建工具前端使用 brunch-with-chaplin-js 骨架基于 Brunch 与 Chaplin 搭建 CommonJS 风格的 HTML5 单页应用使用 brunch with chaplin js 骨架基于 Brunch 与 Chaplin 搭建 CommonJS 风格的 HTML5 单页应用 本文围绕构建工具前端conv_arithmetic代码实现批量生成动画conv_arithmetic代码实现批量生成动画 你是否在深度学习项目中反复手动调整卷积参数、重复生成动画本文将带你掌握conv_arithmetic项目文档教程人工智能深度学习上一篇Loritta定制化指南打造独一无二的Discord服务器体验下一篇FlutterFire启动性能基准建立Firebase初始化性能基准创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考