Wenli Zhang‘s CV 构建流水线：Gulp + Compass + Bower 让样式编译零点击

Wenli Zhangs CV 构建流水线Gulp Compass Bower 让样式编译零点击【免费下载链接】cvWenli Zhangs CV as Web Front-End Engineer项目地址: https://gitcode.com/gh_mirrors/cv4/cvWenli Zhangs CV 是一个前端工程师打造的单页网页版简历项目使用 Gulp 构建流水线、CompassSCSS样式编译与 Bower 依赖管理三件套把简历页面的样式开发和第三方库管理变成一条命令、自动监听的零点击体验。无论你是前端新手还是想优化自己作品集工作流的同学这套流程都值得参考。先看效果一个会翻页的网页简历这个项目的最终产物是一个用 pagePiling.js 实现全页滚动的单页简历包含个人主页、项目、技能、教育背景等板块还支持中英双语切换index.html 与 cn.html。整个简历在线版的视觉稿如下简历首页使用一张高分辨率头像作为视觉中心三件套分工各司其职的构建工具工具角色核心文件Gulp任务调度一条命令跑完全流程gulpfile.jsCompassgulp-compass把 SCSS 编译成浏览器可读的 CSSscss/main.scssBower管理 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 Zhangs CV as Web Front-End Engineer项目地址: https://gitcode.com/gh_mirrors/cv4/cv创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考