RPA-Python与pytest-splinter集成：构建Web测试自动化的终极指南
compass-html5-boilerplate 文件结构全解析：生成的项目里 20+ 个文件分别有什么用？
项目地址: https://gitcode.com/gh_mirrors/co/compass-html5-boilerplate 拿到 compass-html5-boilerplate 后，你是不是对着生成的一堆文件有点懵？作为一款基于 Paul Irish 经典 HTML5 Boilerplate 的 Compass 扩展，它把网站骨架、样式与脚本都打好了包，compass create 一条命令就能产出一个完整项目。今天这篇文章就来彻底拆解 compass-html5-boilerplate 文件结构，带你搞清楚生成项目里 20+ 个文件分别有什么用，从此不再迷茫。
老规矩，先给新同学科普一下：HTML5 Boilerplate 是业界公认的 HTML5 网站起步模板，而 compass-html5-boilerplate 把它变成了 Compass 扩展，既能生成独立项目，也能无缝集成 Rails（配合 Haml + Sass）。项目入口代码在 lib/html5-boilerplate.rb，所有模板与文件清单则由 templates/project/manifest.rb 定义。
一键生成项目：文件从哪里来？
先看看生成命令，理解了它，你就知道这些文件并非凭空出现：
gem install html5-boilerplate
compass create my_project -r compass-h5bp -r html5-boilerplate -u html5-boilerplate --javascripts-dir js --css-dir css
执行后，my_project 目录里会出现 20+ 个文件，整体可以分成四大类：页面与配置文件、样式文件、脚本文件、图标文件。下面逐个击破 👇
第一类：页面文件与站点配置文件（核心中的核心）
这一类文件决定了网站的基础结构，可以说是整个文件结构的“骨架”。
index.html.haml 与 404.html —— 你的页面入口
- index.html.haml 是独立项目的首页模板，采用 Haml 语法书写，
!!! 5声明 HTML5 文档类型，并内置了 IE 条件注释（ie6/ie7/ie8的 class 切换）、移动端 viewport 设置、Google CDN 的 jQuery 加载（含本地兜底）、异步 Google Analytics 统计等 H5BP 经典配方，堪称“开箱即用”的样板页。 - 404.html 是精致的 404 错误页，自带居中排版和
:(表情符号，还内置了 Google 的链接修复脚本，访客输错网址时体验也不差。
站点信息三件套：robots.txt、humans.txt、crossdomain.xml
- robots.txt：搜索引擎爬虫的“通行规则”，默认允许所有爬虫访问（
User-agent: *），之后你按需补充 Disallow 规则即可。 - humans.txt：网站“幕后人员清单”，用来记录团队、致谢名单与站点技术栈（HTML5、CSS3、Modernizr、jQuery），很有极客范儿。
- crossdomain.xml：Flash/Adobe 跨域策略文件，默认采用最严格策略（
permitted-cross-domain-policies="none"），安全优先，需要放行时再按注释修改。
htaccess 与 google.yml —— 服务器与统计配置
- htaccess：Apache 服务器配置模板，涵盖 gzip 压缩、缓存过期头、URL 重写等性能优化项，是提升网站加载速度的“隐形功臣”。
- google.yml：Google Analytics 账号配置（
google_account_id与google_api_key），按 development/test/staging/production 环境分别配置，配合 html5_boilerplate_helper.rb 中定义的google_account_id等方法使用，环境切换零负担。
第二类：样式文件（Compass 模块化的精髓）
这部分是 compass-html5-boilerplate 最大的亮点——把 H5BP 样式拆成了模块化的 Sass partials，你可以按需引用，而不是一次全盘接受。
style.scss —— 样式总入口
style.scss 是样式文件的“调度中心”，按固定顺序引入各模块：
@import "partials/base";
@import "h5bp";
@include h5bp-normalize;
@import "partials/fonts";
@import "partials/page";
@include h5bp-helpers;
@import "partials/media";
注释中明确说明：想精细控制就改引 partials/overrides，helpers 类要倒数第二引入，media 必须放最后。
五个 partials 各司其职
| 文件 | 职责 |
|---|---|
| _base.scss | 基础变量与全局默认样式 |
| _overrides.scss | 覆盖 H5BP 默认 mixin，精细控制 |
| _page.scss | 你的页面专属样式，主战场 |
| _fonts.scss | 字体与排版定义 |
| _media.scss | 媒体查询与响应式样式，必须放最后 |
所有 partials 的清单同样在 templates/project/manifest.rb 中注册。运行 compass watch 后，这些 SCSS 会自动编译成 css/style.css，改完即生效 🎉。
第三类：脚本文件（jQuery 时代的黄金组合）
生成项目的 JavaScript 走的是“CDN 优先 + 本地兜底”的经典路线。
- jquery-1.6.2.js / jquery-1.6.2.min.js：templates/project/javascripts/ 下的 jQuery 1.6.2 完整版与压缩版，供离线环境兜底使用。
- modernizr-2.0.6.min.js：Modernizr 功能检测库，在
<head>中加载，用于检测浏览器对 HTML5/CSS3 特性的支持，并为旧 IE 添加 class。 - plugins.js：自带
window.log日志包装器，并统一兜底 console 方法（老浏览器也不报错），官方建议把自定义 jQuery 插件都写在这里，避免拆成多个小文件拖慢加载。 - script.js：你的“业务脚本”主文件，页面底部加载，注释预留了作者信息位，直接开写即可。
第四类：图标文件（小身材大讲究）
别小看这批小图标，它们在浏览器标签页和移动端主屏上代表你的网站门面：
- favicon.ico：浏览器标签页小图标，全站通用。
- apple-touch-icon.png 系列：iOS 添加到主屏幕时使用的高清图标，包含 57x57、72x72、114x114 及 precomposed 等多个尺寸，覆盖 iPhone/iPad 各种规格。
第五类：Rails 专属的 Haml 模板（选读）
如果你把项目用在 Rails 里，manifest.rb 还会额外生成一组模块化布局：application.html.haml 总布局，以及 _head.html.haml、_header.html.haml、_footer.html.haml、_flashes.html.haml、_javascripts.html.haml、_stylesheets.html.haml 六个局部模板，头尾、提示消息、脚本样式各归其位，配合 helper 中的 ie_tag / ie_body 方法还能轻松生成 IE 条件注释，维护起来非常清爽。
一张表记住 20+ 文件的职责分工
| 分类 | 文件 | 作用一句话 |
|---|---|---|
| 页面 | index.html.haml | 首页模板（Haml） |
| 页面 | 404.html | 错误页 |
| 配置 | htaccess | Apache 性能优化配置 |
| 配置 | robots.txt | 搜索引擎爬虫规则 |
| 配置 | humans.txt | 团队与致谢清单 |
| 配置 | crossdomain.xml | Flash 跨域策略 |
| 配置 | google.yml | GA 统计账号配置 |
| 样式 | style.scss + 5 个 partials | Compass 模块化样式体系 |
| 脚本 | jquery / modernizr / plugins / script | JS 黄金四件套 |
| 图标 | favicon.ico + apple-touch-icon 系列 | 站点与移动端图标 |
结语
看完整张地图，你会发现 compass-html5-boilerplate 的文件结构其实很有章法：页面、配置、样式、脚本、图标五大模块各司其职，既保留了 H5BP 的性能优化基因，又通过 Compass partials 给了你“按需取用”的自由度。下次再 compass create 一个新项目，照着这份清单逐一对号入座，从新手到熟手只需要一个下午 ☕。如果想深入了解某个文件的实现细节，直接去仓库对应路径翻源码即可，所有注释都写得相当详尽！
更多推荐
13
0- 0
已为社区贡献20条内容
所有评论(0)