前端【免费下载链接】foundation-emailsQuickly create responsive HTML emails that work on any device and client. Even Outlook.项目地址https://gitcode.com/gh_mirrors/fo/foundation-emails点击查看免费下载Foundation for Emails 的核心文档 docs/pages/zurb-stack.md 描述了一条名为Foundation stack的完整开发工具链——它把 Gulp 任务编排、Libsass 样式预处理、CSS 自动内联、Panini 扁平文件生成、BrowserSync 实时预览和图片压缩打包成一套开箱即用的邮件开发环境。本文将围绕这条工具链逐层拆解每个环节的职责与配置方式并结合本仓库中的 gulpfile.js、package.json、scss/foundation-emails.scss 等源码讲清楚邮件从源码到可发送 HTML的完整流水线以及如何从旧版本迁移到 2.2.1、如何按需裁剪这套环境。读完你就能自己搭建、配置并扩展一套可复用的 HTML 邮件构建环境。为什么需要一条邮件构建流水线邮件开发的痛点在于HTML 邮件既要兼容 Outlook 等老旧客户端的表格布局又要支持移动端的响应式样式而且大多数客户端会剥离head中的样式表只认内联样式。手工内联 CSS、手工重复页头页脚、手工压缩图片既耗时又容易出错。Foundation stack 的定位正是 docs/pages/index.md 中所说的all-in-one solution for email development——把上述重复劳动全部自动化让开发者专注在内容本身。从本仓库的 package.json 可以看到这条工具链的实际依赖阵容gulp^4.0.2——任务编排gulp-sasssass^1.98.0——Sass 编译gulp-inline-csssiphon-media-querygulp-htmlmin——CSS 内联panini^1.7.1——扁平文件生成browser-sync^2.9.10——实时预览inky^1.5.0——Inky 模板语言解析gulp-imagemin系列——图片压缩Gulp整个 Stack 的地基文档将 Gulp 定位为the Stack is built on——它是整条流水线的调度中心。Gulp 以任务task 流stream的方式串联各个步骤读入源文件 → 交给对应插件处理 → 输出到目标目录。在本仓库的 gulpfile.js 中可以看到这套任务模型的真实形态例如clean任务清空_build构建目录gulpfile.jshtml任务读取docs/pages/**/*依次经过supercollider.init()、panini()后输出到_buildgulpfile.jssass:foundation任务将 scss/foundation-emails.scss 编译为_build/assets/css下的 CSSgulpfile.jsbuild任务用gulp.series(clean, copy, copy-inky, html, sass, javascript:docs, ...)把以上步骤串成一条完整流水线gulpfile.js。任务之间的依赖关系、串行顺序全部由 Gulp 负责这也是为什么文档说它让内联、自动刷新浏览器这些酷操作成为可能。Sass用 Libsass 给邮件样式分层Foundation for Emails 的样式不再是一整块手写 CSS而是用Sass组织成分层结构。文档指出项目使用LibsassC 实现的 Sass 编译器速度快作为预处理核心本仓库当前通过gulp-sass接入sassDart Sass^1.98.0完成同样的工作。Sass 带来的能力在 scss/foundation-emails.scss 中一览无余——它用一组import把样式库拆成多个模块import util/util, global, components/normalize, grid/grid, grid/block-grid, components/alignment, components/visibility, components/typography, components/button, components/callout, components/thumbnail, components/menu, components/outlook-first, components/media-query;每个模块对应scss/下的一个文件例如 scss/components/_button.scss、scss/grid/_grid.scss。这意味着你可以用变量统一管理品牌色、字号、间距等全局视觉参数见 scss/settings/_settings.scss用嵌套让选择器结构更清晰用mixin复用常见的邮件兼容性代码见 scss/util/_util.scss。对邮件开发而言Sass 的另一个价值是一处改、处处改修改_settings.scss中的某个变量整封邮件的配色、栅格宽度都会随之更新而不必手工翻遍每一段内联样式。Inlining告别手工内联 CSS邮件客户端大多不读取head中的style块因此发送前必须把 CSS 注入到每个元素的style属性中——这就是文档强调的曾经最大的痛点和时间黑洞。Foundation stack 用gulp-inline 系列工具自动完成这件事它会扫描你的 CSS 文件在构建时自动把样式注入 HTML。文档给出的触发命令是npm run build在当前仓库的 gulpfile.js 中可以看到这条内联管线的完整实现——inliner(css)函数读取编译后的 CSS先用siphon-media-query抽出媒体查询再用gulp-inline-css将可内联的规则注入元素最后把抽出的媒体查询回填到style标签中function inliner(css) { css fs.readFileSync(css).toString(); var mqCss siphon(css); var pipe lazypipe() .pipe($.inlineCss, { applyStyleTags: false, removeStyleTags: false, removeLinkTags: false }) .pipe($.injectString.replace, !-- style --, stylemqCss/style) .pipe($.htmlmin, { collapseWhitespace: false, minifyCSS: false, maxLineLength: 800 }); return pipe(); }这段代码同时印证了文档默认不删除空白的说法也解释了内联背后的关键决策媒体查询如media响应式规则无法内联到元素上必须单独抽出来保留在style中否则移动端布局会失效applyStyleTags: false表示不把已有style中的规则强行应用避免与注入的 CSS 冲突。Build Options按需调整内联与压缩行为文档强调默认情况下内联器不会删除空白、不会压缩样式如果你需要更极致的体积优化就要在项目根目录gulpfile.babel.js官方模板中的文件名本仓库中对应实现位于 gulpfile.js的inliner(css)函数里手动修改配置。以本仓库的实际实现为例默认参数是.pipe($.htmlmin, { collapseWhitespace: false, // 默认保留 HTML 空白 minifyCSS: false, // 默认不压缩 CSS maxLineLength: 800 // 行宽上限兼顾可读性与体积 })文档给出的改造示例是将其改为压缩模式.pipe($.htmlmin, { collapseWhitespace: true, // 删除空白字符缩小文件体积 minifyCSS: true // 压缩 CSS });需要提醒的是邮件体积与兼容性需要权衡。过度压缩可能让某些客户端的解析器消化不良这也是文档把这两项默认关闭、交由开发者按需开启的原因。Panini用扁平文件组装邮件页面邮件通常由头部、正文、页脚等多段重复结构组成。如果每封邮件都整页复制粘贴改一处页脚就要改所有文件。文档把Panini比作把一组食材压成一块美味的扁平文件生成器——它基于Handlebars模板语言让你把公共部分拆成partial片段在多个页面中复用。Panini 的三大概念详见 docs/pages/panini.md模板layouts所有页面共享的骨架页面内容通过{{ body}}注入。本仓库文档站自己的布局 docs/layouts/default.html 就是典型例子——它用{{ off-canvas}}、{{ navigation}}、{{ body}}、{{ footer}}拼出完整页面页面pages只写正文部分没有html、body例如 templates/basic.html片段partials可复用的 HTML 片段如页头、页脚、社交链接区通过{{ header}}这类语法按名注入。Panini 还内置了丰富的能力页面变量{{page}}输出当前页名{{root}}保证相对路径在任意目录层级都能正确解析详见 docs/pages/panini.md内置 helper{{#ifpage index}}按页面条件渲染、{{#unlesspage}}取反、{{#repeat 5}}批量复制、{{#markdown}}把 Markdown 转成 HTML详见 docs/pages/panini.md自定义数据既可以通过页面顶部的 Front Matter 定义单页变量也可以把src/data下的 YML/JSON 文件加载为全局变量并用{{#each}}循环输出详见 docs/pages/panini.md。在本仓库的 gulpfile.js 中Panini 被这样接入流水线.pipe(panini({ root: docs/pages/, layouts: docs/layouts/, partials: docs/partials/, helpers: foundationDocs.handlebarsHelpers }))其中layouts与partials两个配置项正是模板与片段目录的具体落地。BrowserSync保存即刷新的实时预览邮件迭代中最大的浪费之一是改一行 → 手工刷新 → 确认效果。文档对 BrowserSync 的评价是awesome它让你在浏览器中实时看到代码变更——保存文件浏览器立即自动刷新。本仓库的用法gulpfile.js展示了它在开发服务器中的典型角色gulp.task(server, gulp.series(build, function(){ browser.init({server: ./_build, port: yargs.argv.port||3001}); })); gulp.task(default, gulp.series(server, function() { gulp.watch(docs/**/*, gulp.series(html, browser.reload)); gulp.watch([docs/assets/scss/**/*, node_modules/foundation-docs/scss/**/*], gulp.series(sass:docs, browser.reload)); gulp.watch(scss/**/*.scss, gulp.series(sass:foundation, browser.reload)); }));gulp.watch监听源文件变化一旦改动就重新执行对应任务并触发browser.reload()。这意味着改 HTML → 重新编译页面并刷新改 Sass → 重新编译样式并刷新默认任务还支持通过--port参数指定端口默认 3001。在官方模板中启动这一整套开发环境的命令是npm start见 README.md 的说明随后会自动打开浏览器窗口指向 BrowserSync 服务器。Image Compression发送前的图片减负邮件图片体积直接决定加载速度文档为此引入了gulp-imagemin它智能地压缩 png、jpeg、gif 和 svg 图片让邮件以闪电速度加载。在官方模板的构建流程中图片压缩与 Sass 编译、内联同属npm run build的一部分。需要说明的是压缩应当在图片最终定稿后进行——因为构建产物dist/_build目录通常是准备上传给 ESP邮件服务商的最终文件这与 docs/pages/panini.md 中对dist目录可直接上传到任何 ESP的描述是一致的。迁移到 2.2.1旧项目的升级步骤文档为旧项目升级到 2.2.1 给出了明确的四步操作本仓库当前版本已迭代至 2.5.1见 package.json升级思路与参数位置可供参考第一步更新主依赖版本。打开项目根目录的package.json把dependencies中 foundation-emails 的版本原文约在第 16 行附近改为2.2.1。第二步更新 Inky 版本。在同一个package.json的devDependencies区域原文约在第 41 行附近把inky的版本改为^1.3.6。当前仓库使用的 inky 版本为^1.5.0见 package.json说明该依赖仍在持续演进。第三步改名以兼容共存。为了让你能同时使用 Foundation for Sites 与 Foundation for Emails 而不冲突Foundation for Emails 的 CSS 文件名从foundation改成了foundation-emailsSass 版本修改app.scss中的导入语句把foundation改为foundation-emails。本仓库的 scss/foundation-emails.scss 就是这一改名的直接产物CSS 版本把引用从foundation.min.css改为foundation-emails.min.css。第四步重装依赖并构建。打开命令行进入项目根目录后依次执行npm install foundation buildnpm install会按新的版本约束拉取依赖构建命令则会重新编译 Sass 并产出改名后的 CSS。按需定制把 Stack 裁剪成你自己的环境文档在结尾特别强调Foundation stack 只是一个起点它的 gulp 文件完全允许你拆掉或加上任何东西拼出属于自己的完美邮件环境。这体现在任务即积木本仓库的 gulpfile.js 本身就是范例——clean、copy、html、sass:foundation、sass:docs、javascript:docs、settings、lint、build、server、test、templates、dist等任务各自独立通过gulp.series(...)自由组合例如test任务串起sass与test:compile见 gulpfile.js依赖可增删不想要图片压缩就把相关插件从 package.json 中移除想接入自己的 CSS 框架就替换sass:foundation的输入与 Inky 协同test:compile任务展示了 Inky 的接入方式——先用.pipe(inky())把container、row、column等自定义标签展开为邮件兼容的表格再交给inliner()内联样式gulpfile.js。这也对应了 migration.md 中所说的Inky 让你从表格里解放出来。小结Foundation stack 的本质是把邮件开发中最繁琐的四个环节自动化Gulp调度一切任务Sass让样式可编程化内联管线解决客户端只认内联样式的硬约束Panini BrowserSync解决页面复用与实时反馈图片压缩解决体积问题。通过本仓库的 gulpfile.js、package.json 与 docs/pages/panini.md你可以对照实际源码理解每一个环节的实现细节并在此基础上搭建属于自己的邮件构建环境。赞分享前端【免费下载链接】foundation-emailsQuickly create responsive HTML emails that work on any device and client. Even Outlook.项目地址https://gitcode.com/gh_mirrors/fo/foundation-emails点击查看免费下载相关推荐EdgeRemover终极指南彻底卸载Windows的Microsoft Edge浏览器EdgeRemover终极指南彻底卸载Windows的Microsoft Edge浏览器 你是否曾经想要卸载Windows自带的Microsoft Edge浏前端cc-switch 本地路由服务proxy_enabled 开关持久化与停止时配置覆写修复7210深度解析cc switch 本地路由服务proxy_enabled 开关持久化与停止时配置覆写修复 7210深度解析 本文拆解 cc switch 本地路由服务AI 应用开发者工具桌面应用Foundation for Emails 项目中的 Sass 使用指南Foundation for Emails 项目中的 Sass 使用指南 前言 在现代电子邮件开发中Sass 已经成为提升开发效率和维护性的重要工具。Foun前端上一篇Go错误处理库选型指南为什么gh_mirrors/er/errors是最佳选择下一篇Graphene异步查询实现提升并发处理能力创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考