Wenli Zhang‘s CV 构建流水线：Gulp + Compass + Bower 让样式编译零点击
Wenli Zhang's CV 构建流水线：Gulp + Compass + Bower 让样式编译零点击
【免费下载链接】cvWenli Zhang's CV as Web Front-End Engineer项目地址: https://gitcode.com/gh_mirrors/cv4/cv
Wenli Zhang's CV 是一个前端工程师打造的单页网页版简历项目，使用 Gulp 构建流水线、Compass（SCSS）样式编译与 Bower 依赖管理三件套，把简历页面的样式开发和第三方库管理变成"一条命令、自动监听"的零点击体验。无论你是前端新手还是想优化自己作品集工作流的同学，这套流程都值得参考。
先看效果：一个会"翻页"的网页简历
这个项目的最终产物是一个用 pagePiling.js 实现全页滚动的单页简历，包含个人主页、项目、技能、教育背景等板块，还支持中英双语切换（index.html 与 cn.html）。整个简历在线版的视觉稿如下：
简历首页使用一张高分辨率头像作为视觉中心：
三件套分工：各司其职的构建工具
| 工具 | 角色 | 核心文件 |
|---|---|---|
| Gulp | 任务调度，一条命令跑完全流程 | gulpfile.js |
| Compass（gulp-compass） | 把 SCSS 编译成浏览器可读的 CSS | scss/main.scss |
| Bower | 管理 pagePiling.js 等第三方库 | bower.json |
三者配合后，开发者只写 SCSS，其余交给流水线：
scss/ (手写样式源文件) │ gulp-compass 编译 ▼ css/main.css (浏览器加载) bower_components/pagepiling.js │ gulp vendor 任务复制 ▼ vendor/ (页面实际引用的位置)一键执行 Gulp 构建任务
整个构建逻辑集中在gulpfile.js中，只有三个任务：
- compass 任务：监听
scss/目录下所有文件，通过 gulp-compass 编译输出到css/目录，并配置sass: 'scss'指定 SCSS 语法； - vendor 任务：把 Bower 装到
bower_components里的 pagePiling.js 的 JS 和 CSS 复制到vendor/，供页面<head>引用； - default 任务：一次性跑完上面两个任务，并开启
gulp.watch对scss/**的监听——改一行 SCSS，浏览器里立刻看到新样式，无需再点任何构建按钮，这就是"零点击"的由来。
也就是说，日常开发只需要在终端敲一条gulp，之后就能安心写样式。
SCSS 模块化组织方式：10 个文件各司其职
scss/目录共 10 个文件，main.scss是入口，通过@import按"变量 → 全局 → 组件 → 移动端"的顺序组装：
main.scss ├── settings.colors // 颜色变量 ├── settings.fonts // 字体设置 ├── settings.links // 链接状态样式 ├── settings.text // 文本排版 ├── base.global // 全局基础样式 ├── components.image // 图片组件 ├── components.columns// 双栏布局组件 ├── components.social // 社交图标组件 └── mobile.settings // 移动端适配以scss/_settings.colors.scss为例，开头就定义了一组语义化颜色变量（$clr-primary: #22C3AA等），后续所有组件都引用这些变量。想换主题色？只改这一处变量即可全站生效——这正是 SCSS 变量比手写 CSS 强的地方。下划线开头的_前缀文件是 Sass 的 partial 约定：它们只被导入、不被单独编译，目录结构一目了然。
Bower 管理第三方依赖
bower.json 声明了项目唯一的第三方依赖pagepiling.js（版本~0.0.7），执行bower install后库会出现在bower_components/目录。但浏览器并不直接引用这个目录——Gulp 的 vendor 任务会把它"搬运"到vendor/，这样页面引用的路径稳定，也与构建产物清晰分离。
快速搭建本地开发环境
三步跑起整套流水线：
- 克隆仓库：
git clone https://gitcode.com/gh_mirrors/cv4/cv- 安装依赖（Node.js 工具链 + Bower 库）：
bower install npm install- 启动构建与监听：
gulp启动后修改scss/中任意文件，css/main.css会自动重新生成，浏览器刷新即可预览——从写样式到看效果，全程零点击。
小结：这套工作流值得抄的三个点
- 单一入口命令：default 任务把"编译 + 复制 + 监听"合并成一条
gulp，新手不会记错任务名； - 样式源与产物分离：手写的 SCSS 在
scss/，编译产物在css/，第三方库经vendor/中转，目录职责清晰； - 语义化变量管理主题：颜色、字体集中在 settings 分片中，换肤成本极低。
项目以 MIT 协议开源，PDF 版简历的 InDesign 源文件位于res/cv.indd，许可说明见 license.md。如果你想给自己的作品集套上同样的构建流程，把gulpfile.js里的三个任务照搬即可。
【免费下载链接】cvWenli Zhang's CV as Web Front-End Engineer项目地址: https://gitcode.com/gh_mirrors/cv4/cv
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考