构建工具前端【免费下载链接】brunch Web applications made easy. Since 2011.项目地址https://gitcode.com/gh_mirrors/br/brunch点击查看免费下载导读styl-brunch 是 Brunch 生态中的一款样式表插件它为 Brunch 构建流程接入 Styl 目录为依据系统讲解它的定位、安装方式、配置项如自定义functions、底层编译管线与测试验证方式帮助你真正在项目中用起来并理解它编译.styl文件的完整原理。一、styl-brunch 是什么Styl 与 Stylus 的关系官方 README 给出的定义非常清晰Adds styl CSS preprocessor support to brunch. Styl is a successor of Stylus with less complexity (and features).也就是说Styl是 Stylus 的继任者继承了 Stylus 的缩进式语法风格但砍掉了大量复杂特性追求更少的复杂度和更少的功能styl-brunch的角色是胶水层负责把 Styl 编译器接入 Brunch 的插件协议让.styl文件在 Brunch 的构建管线中被识别、编译并合并进最终的app.css样式产物。值得强调的是本仓库同时存在两个名字相近但完全不同的插件packages/addons/styl-brunch —— 编译Styl语法packages/addons/stylus-brunch —— 编译Stylus语法完整版支持 nib、imports、CSS Modules 等。选择插件时务必先确认你的样式文件扩展名与所用语法.styl交给 styl-brunch.styl/.stylus的完整 Stylus 语法则对应 stylus-brunch。本仓库的示例项目如 examples/todos 和 examples/twitter中大量使用.styl样式文件正是这类插件所服务的场景。二、安装方式与版本适配2.1 通过 npm 安装推荐官方 README 推荐直接安装为开发依赖npm install --save-dev styl-brunch--save-dev意味着该插件只在开发/构建阶段使用不会打进运行时依赖。2.2 手动安装不依赖 npm install 命令你也可以手动把它写入应用的package.json{ devDependencies: { styl-brunch: x.y.z } }README 特别强调了一个版本适配原则Pick a plugin version that corresponds to your minor (y) brunch version.即插件版本号的y次版本号应与你的 Brunch 主版本所对应的次版本保持一致。例如 Brunch 2.x 对应 styl-brunch 2.x。这与 packages/addons/styl-brunch/CHANGELOG.md 中的记录吻合——2.0.0 版本说明明确指出Updated source code API. The plugin would now only work with Brunch 2.2 and higher.也就是说当前仓库中的 styl-brunch 2.0.0 只兼容Brunch 2.2 及以上版本低于此版本的 Brunch 无法使用它因为其依赖了较新的插件协议与 Promise 化的编译 API。2.3 使用 git 版本如果你想直接使用插件仓库的 git 版本通常是体验尚未发布到 npm 的最新改动可以这样写{ devDependencies: { styl-brunch: gitssh://gitgithub.com:brunch/styl-brunch.git } }三、把插件接入 Brunch 构建管线它如何被识别安装之后styl-brunch 并不需要你在brunch-config.js里显式注册——Brunch 会自动扫描node_modules中带brunchPlugin标志的包。我们可以在 packages/addons/styl-brunch/index.js 末尾看到三个关键的协议标记StylPlugin.prototype.brunchPlugin true; StylPlugin.prototype.type stylesheet; StylPlugin.prototype.extension styl;brunchPlugin true向 Brunch 声明我是一个 Brunch 插件type stylesheet声明我处理样式表文件编译结果会汇入样式产物app.cssextension styl声明我负责的扩展名。Brunch 的插件适配层 lib/utils/plugin-adapter.js 会把这些标记规范化——extension会被转换为对应的正则匹配模式约/.styl$/i见其中的extToRegExp并统一包装compile等方法的调用签名兼容回调式、Promise 式与(data, path)式等多种历史 API。styl-brunch 2.0.0 采用的就是其中标注为 Modern API 的compile(file)单参数形式直接返回 Promise代码简洁且与现代 Brunch 协议完全对齐。四、核心配置项详解styl-brunch 的配置全部通过 Brunch 配置文件中的plugins.styl节点传入即brunch-config.js中的config.plugins.styl。虽然 README 没有专门列出 Options 章节但我们可以从源码 packages/addons/styl-brunch/index.js 的构造函数中完整还原它支持的全部配置constructor(config) { if (!config) config {}; this.rootPath (config.paths || {}).root || .; const styl this.config config.plugins config.plugins.styl || {}; if (styl.functions) { this.functions functions(styl.functions); } }4.1plugins.styl.functions自定义函数核心配置这是插件对外暴露的唯一业务配置项。它的作用是把你在 Styl 源文件中调用的自定义函数映射为 JS 实现从而扩展 Styl 的表达式能力。典型配置如下// brunch-config.js module.exports { // ... plugins: { styl: { functions: { rgba: function(color, alpha) { // 自定义实现把十六进制颜色解析为 rgba 输出 return rgba(204, 204, 204, .5); }, // 可以继续添加其他函数add, multiply, myUtility ... } } } };在 packages/addons/styl-brunch/test.js 中给出了一个更完整的真实用例——通过color-parser把rgba(#ccc, .5)解析并重组为合法的 rgba 输出functions: { rgba: function(color, alpha) { var args; if (2 arguments.length) { var c parse(color.trim()); args [c.r, c.g, c.b, alpha]; } else { args [].slice.call(arguments); } return rgba( args.join(, ) ); }, }而index.js中的这一行this.functions functions(styl.functions);表示这些自定义函数会被交给rework-plugin-function包装成 rework 插件最终注入编译管线详见下一节的编译原理。4.2config.paths.root导入解析的根路径this.rootPath (config.paths.root) || .——它决定了 Styl 文件中import语句的相对基准目录。Brunch 项目的标准配置如 packages/examples/twitter/config.coffee通常会把paths.root设为app此时import就会基于该目录解析。4.3 没有配置项时的默认行为什么都不配置也完全可以工作。源码中config.plugins.styl || {}意味着plugins.styl缺省时插件正常初始化functions为空、不注入任何自定义函数编译依然进行。五、编译流程从.styl到 CSS 的源码级解析5.1 入口compile(params)packages/addons/styl-brunch/index.js 的compile方法是整个插件的核心compile(params) { const data params.data; const path params.path; const dir sysPath.dirname(path); const options { whitespace: true, path: [dir, this.rootPath], functions: this.functions }; return new Promise((resolve, reject) { try { new styl(data, options).compile((err, res) { if (err) return reject(err); resolve(res); }); } catch (_error) { reject(_error); } }); }要点逐条说明whitespace: true开启 CSS 空白缩进语法变换。这是 Styl 语法的基础——body\n transition: height这种缩进写法就是靠css-whitespace转换成带花括号的 CSS 的path: [dir, this.rootPath]导入解析的搜索路径数组——先查当前文件所在目录sysPath.dirname(path)再查项目根路径。这意味着.styl文件可以同时import相对自己目录的局部文件以及相对项目根的公共文件functions上节配置的自定义函数集合返回值统一包装为Promise且编译内部通过回调(err, res)风格把res即{data, dependencies}见下交给 Brunch 管线。5.2 底层基于 rework 的编译栈styl-brunch并没有自研编译器而是把styl语法文件交给一个由 rework 插件组成的管线处理。这一点从 packages/addons/styl-brunch/styl.js 可以看得非常清楚const rework require(rework); const mixin require(rework-plugin-mixin); const mixins mixin(require(rework-mixins)); const variant require(rework-variant); const imprt require(rework-import); const whitespace require(css-whitespace); // Load plugins. [ rework-plugin-ease, rework-plugin-colors, rework-plugin-references, rework-plugin-at2x, rework-inherit, rework-shade ].forEach(require);compile(fn)的处理顺序是consume(imprt({path: this.path, transform: whitespace}))—— 先做import 解析import合并且 import 进来的内容同样经过 whitespace 变换依次use(variant())、use(mixins)注入CSS 变量变体支持与rework-mixins 混入库这是 Styl 语法里border-radius()之类混入能力的基础若存在自定义函数use(this.functions)注入用户函数插件最后rew.toString({compress: this.compress})输出 CSS。返回值是{data, dependencies}fn(null, {data: data, dependencies: rew.dependencies});其中dependencies是 rework 记录的依赖文件列表Brunch 会据此做增量编译与 watch 依赖跟踪——当某个被import的.styl文件变化时Brunch 能自动重编引用它的文件。5.3 关于压缩输出的说明styl.js的构造器接受options.compress并在toString({compress})中启用输出压缩。但从插件入口index.js看compile并没有把压缩开关传给底层。也就是说styl-brunch 2.0.0 默认输出未压缩的 CSS生产环境的压缩通常交给 Brunch 管线的其他步骤如 brunch 自身的optimize阶段或 minify 类插件完成。这一点从源码结构可以推断属于插件的默认行为边界。六、用测试用例验证编译行为packages/addons/styl-brunch/test.js 使用 Mocha Chai 编写是理解插件行为的活文档。基础编译测试把缩进语法转换为标准 CSS。var content body\n transition: height; var expected body {\n transition: height;\n}; // compile 后断言 data 相等自定义函数扩展测试验证functions配置真实生效。var content body\n color: rgba(#ccc, .5); var expected body {\n color: rgba(204, 204, 204, .5);\n};测试还覆盖了插件对象的基本契约plugin存在、compile是函数、编译结果以 Promise 返回。你可以在插件目录下运行这些测试来本地验证仓库中对应脚本见 packages/addons/styl-brunch/package.json 的scripts.test即eslint index.js styl.js mochacd packages/addons/styl-brunch npm install npm test此外package.json的依赖清单css-whitespace、rework、rework-import、rework-mixins、rework-plugin-function等十余个包与styl.js的require一一对应任何想深入 rework 插件机制或替换底层编译实现的开发者都可以以此为索引继续研究。七、在真实项目中落地一个最小可运行示例综合以上内容一个使用 styl-brunch 的最小项目配置大致如下// brunch-config.js module.exports { paths: { public: public, watched: [app] }, files: { stylesheets: { joinTo: app.css } }, plugins: { styl: { // 可选注入自定义函数 functions: { rem: function(px) { return (parseFloat(px) / 16) rem; } } } } };配合下面的样式源文件app/styles/main.stylbody font-size: rem(16px) transition: height .button border-radius(4px) background: #ccc执行brunch build或brunch watch后Brunch 会自动找到 styl-brunch 插件、编译.styl文件并输出public/app.css。其中rem(16px)会命中我们在配置中注册的自定义函数而border-radius(4px)则由内置的 rework-mixins 混入提供支持。八、版本历史与兼容性速查来自 packages/addons/styl-brunch/CHANGELOG.md 的完整版本脉络版本日期说明2.0.02016-01-29重写源码与 API仅支持 Brunch 2.2本仓库当前版本1.7.02013-02-26用 JavaScript 重写1.6.02013-06-22首次发布这再次印证了安装一节提到的插件 minor 版本与 Brunch minor 版本对应的适配原则。九、许可协议styl-brunch 采用MIT License详见 packages/addons/styl-brunch/package.json 及 README 末尾的完整许可文本Copyright (c) 2012-2013 Paul Miller。这意味着你可以自由地在其基础上修改、分发乃至集成到商业项目中只需保留版权声明与许可文本。总结styl-brunch 是 Brunch 生态中接入 Styl 轻量级 CSS 预处理的官方插件。本文从它的定位与 Stylus 的区别讲起覆盖了 npm/手动/git 三种安装方式、与 Brunch 版本号的对应关系、plugins.styl.functions与paths.root两个核心配置、基于 rework 的编译管线import → variant → mixins → functions → CSS 输出、依赖跟踪返回值以及测试用例验证。如果你正在编写缩进式 CSS 并希望保持构建流程极简那么 styl-brunch 是本仓库中最对口的现成方案——把 packages/addons/styl-brunch/index.js 和 packages/addons/styl-brunch/styl.js 两处源码通读一遍你就能完全掌握它的行为边界与扩展方式。赞分享构建工具前端【免费下载链接】brunch Web applications made easy. Since 2011.项目地址https://gitcode.com/gh_mirrors/br/brunch点击查看免费下载相关推荐postcss-brunch 集成指南在 Brunch 中使用 PostCSS 处理与 CSS Modulespostcss brunch 集成指南在 Brunch 中使用 PostCSS 处理与 CSS Modules 导读 本文聚焦 brunch 仓库中的 pos构建工具前端clean-css-brunch 使用指南为 Brunch 构建流水线接入 CleanCSS 压缩clean css brunch 使用指南为 Brunch 构建流水线接入 CleanCSS 压缩 clean css brunch 是一个 Brunch 优构建工具前端sass-brunch 3.0 使用指南在 Brunch 项目中编译 Sass/SCSS 与启用 CSS Modulessass brunch 3.0 使用指南在 Brunch 项目中编译 Sass/SCSS 与启用 CSS Modules sass brunch 是 Brun构建工具前端上一篇Fleet 图标库从 PNG 迁移到 SVG 组件的前端架构与实践指南下一篇数据恢复自救指南用开源 TestDisk 与 PhotoRec 3 步找回丢失的分区与文件创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考