第 2 章:自动化构建

1. 阅读参考资料

2. 在线电子书

要求:

  • 在 GitHub 上创建 book 仓库
  • 在 book 仓库的 master 分支放置电子书的章节和目录的 MarkDown 文档
  • 在 book 仓库的 gh-pages 分支放置 gitbook build 后的 HTML 文件
  • 电子书的前两章用手动构建,并完成第一次发布上线
  • 用 Chrome 浏览器查看在线电子书
  • 增加电子书的第三章,继续使用手动构建,并完成第二次发布上线
  • 用 Chrome 浏览器查看更新后的电子书
  • 体验手动构建的繁琐,考虑哪些构建过程可以自动化完成
  • 阅读 Travis-CI gh-gage 自动部署文章
  • 配置电子书 book 仓库启用 Travis-CI
  • 获取个人 GitHub 账户开发者 API token
  • 配置 book 仓库的 Travis-CI 环境变量
  • 在 book 仓库的 master 分支,添加 .travis.yml 和 package.json 文件
  • 在 book 仓库增加第四章的 MarkDown 文件
  • 将 master 分支的变更推送 GitHub 服务器
  • 在 Travis-CI 网站查看自动构建脚本执行的情况
  • 用 Chrome 浏览器查看自动构建后的电子书

示例参考:

3. LESS 预处理

要求:

  • 阅读 grunt-contrib-less 插件文档
  • 在 GitHub 上创建 grunt-demo 仓库
  • 在 grunt-demo 仓库添加 less 分支
  • 在 less 分支添加 index.html 页面和 LESS 样式
  • npm 安装 grunt 和 grunt-contrib-less 插件
  • 添加 Gruntfile.js,实现 LESS 预处理
  • 执行自动化任务,观察自动化构建执行的效果

示例参考:

4. HTML 静态代码检查

要求:

  • 阅读 grunt-htmlhint 插件文档
  • 阅读 htmlhint 规则文档
  • 在 grunt-demo 仓库添加 htmlhint 分支
  • 在 htmlhint 分支复制 rectangle 仓库的 index.html、rectangle.css 和 rectangle.js 三个代码文件
  • 添加 .htmlhintrc 配置文件
  • npm 安装 grunt 和 grunt-htmlhint 插件
  • 添加 Gruntfile.js,实现 HTML 代码静态代码检查
  • 执行自动化任务,观察自动化构建执行的效果

示例参考:

5. CSS 静态代码检查

要求:

  • 阅读 grunt-contrib-csslint 插件文档
  • 阅读 csslint 规则文档
  • 在 grunt-demo 仓库添加 csslint 分支
  • 在 csslint 分支复制 rectangle 仓库的 index.html、rectangle.css 和 rectangle.js 三个代码文件
  • 添加 .csslintrc 配置文件
  • npm 安装 grunt 和 grunt-contrib-csslint 插件
  • 添加 Gruntfile.js,实现 CSS 代码静态代码检查
  • 执行自动化任务,观察自动化构建执行的效果

示例参考:

6. JavaScript 静态代码检查

要求:

  • 阅读 grunt-eslint 插件文档
  • 阅读 eslint 规则文档
  • 在 grunt-demo 仓库添加 eslint 分支
  • 在 eslint 分支复制 rectangle 仓库的 index.html、rectangle.css 和 rectangle.js 三个代码文件
  • 添加 .eslintrc.json 配置文件
  • npm 安装 grunt 和 grunt-eslint 插件
  • 添加 Gruntfile.js,实现 JavaScript 代码静态代码检查
  • 执行自动化任务,观察自动化构建执行的效果

示例参考:

7. 矩形计算器 v0.2

要求:

  • 切换到 rectangle 项目仓库
  • npm 安装 grunt 和相应的 grunt 插件
  • 添加自动化构建脚本 Gruntfile.js
  • 对 HTML、CSS 和 JavaScript 代码实现静态代码检查
  • 添加 Travis CI 配置脚本,实现代码在 gh-pages 分支的自动发布
  • 用 chrome 浏览器查看自动化构建并发布的 rectangle 应用

示例参考:

8. 阅读单元测试参考资料

9. 服务端代码单元测试

要求:

  • 阅读 grunt-mocha-cli 插件文档
  • 阅读 grunt-mocha-istanbul 插件文档
  • 在 grunt-demo 仓库,创建 mocha-be 分支
  • 创建被测模块 add.js,被测模块暴露出 add 方法,实现 z = x + y
  • 对 add.js 模块,编写 mocha 单元测试脚本
  • 执行 mocha 命令,运行单元测试,查看单元测试输出结果
  • 进行代码覆盖率测试
  • 查看代码覆盖率报告
  • 添加 grunt 插件支持,实现 grunt mocha 单元测试
  • 添加 grunt 插件支持,实现 grunt 代码覆盖率测试

示例参考:

10. entropy 的单元测试

要求:

  • 在 grunt-demo 仓库,创建 entropy 分支
  • 获取 entropy.js 被测程序
  • entropy 程序的功能描述,请参考 Node.js 大作业
  • 重构 entropy.js 代码,使其易于实施单元测试
  • 添加 mocha 单元测试代码
  • 运行 grunt mocha 单元测试,查看单元测试输出结果
  • 查看代码覆盖率报告

示例参考:

11. 前端代码单元测试

要求:

  • 阅读 grunt-mocha 插件文档
  • 在 grunt-demo 仓库,创建 mocha-fe 分支
  • 将 rectangle 仓库中的 index.html、rectangle.js 和 rectangle.css 三个代码文件复制到当前项目仓库的 mocha-fe 分支下
  • 重构 rectangle.js 代码,使其易于实施单元测试
  • 添加 mocha 单元测试代码
  • 运行 grunt mocha 单元测试,查看单元测试输出结果

示例参考:

12. 矩形计算器 v0.3

要求:

  • 切换到 rectangle 项目仓库
  • 重构 rectangle.js 代码,使其易于实施单元测试
  • 添加 Mocha + Chai 单元测试代码
  • 在自动化构建脚本 Gruntfile.js 中添加单元测试构建任务
  • 将静态代码检查和单元测试任务添加到 npm test 脚本中
  • 添加 Travis CI 配置脚本,实现代码在 gh-pages 分支的自动发布
  • 用 chrome 浏览器查看自动化构建并发布的 rectangle 应用

示例参考:

13. 压缩 HTML 代码

要求:

  • 阅读 grunt-contrib-htmlmin 插件文档
  • 在 grunt-demo 仓库,创建 htmlmin 分支
  • 将 rectangle 仓库中的 HTML、CSS 和 JavaScript 代码文件复制到当前项目仓库的 htmlmin 分支下
  • npm 安装 grunt 和 grunt-contrib-htmlmin 插件
  • 添加 Gruntfile.js,实现 HTML 代码压缩
  • 执行自动化任务,观察自动化构建执行的效果

示例参考:

14. 压缩 CSS 代码

要求:

  • 阅读 grunt-contrib-cssmin 插件文档
  • 在 grunt-demo 仓库,创建 cssmin 分支
  • 将 rectangle 仓库中的 HTML、CSS 和 JavaScript 代码文件复制到当前项目仓库的 htmlmin 分支下
  • npm 安装 grunt 和 grunt-contrib-cssmin 插件
  • 添加 Gruntfile.js,实现 CSS 代码压缩
  • 执行自动化任务,观察自动化构建执行的效果

示例参考:

15. 压缩 JavaScript 代码

要求:

  • 阅读 grunt-contrib-uglify 插件文档
  • 在 grunt-demo 仓库,创建 uglify 分支
  • 在项目目录下创建 js 目录,并切换到 js 目录
  • 运行命令 wget https://sample.wangding.in/spa/jquery.js 下载 jquery.js 文件
  • npm 安装 grunt 和 grunt-contrib-uglify 插件
  • 添加 Gruntfile.js,实现 JavaScript 代码压缩
  • 执行自动化任务,观察自动化构建执行的效果

示例参考:

16. 矩形计算器 v0.4

要求:

  • 切换到 rectangle 项目仓库
  • 在自动化构建脚本 Gruntfile.js 中添加代码压缩构建任务
  • 将代码压缩构建任务编写到 Travis CI 配置脚本中
  • 确保自动发布的代码是压缩优化后的代码
  • 推送修改的代码到 GitHub 仓库
  • 用 chrome 浏览器查看自动化构建并发布的 rectangle 应用
  • 验证应用代码是压缩后的代码

示例参考:

17. 压缩图片

要求:

  • 阅读 grunt-contrib-imagemin 插件文档
  • 在 grunt-demo 仓库,添加 imagemin 分支
  • 在当前项目目录下创建 images 目录,切换到 images 目录
  • 运行命令 wget https://sample.wangding.in/spa/images.tar 下载 images.tar 文件
  • 运行命令 tar -xf images.tar 解压图片文件
  • 运行命令 rm images.tar 删除压缩文件
  • npm 安装 grunt 和 grunt-contrib-imagemin 插件
  • 添加 Gruntfile.js,实现图片压缩
  • 执行自动化任务,观察自动化构建执行的效果

示例参考:

18. 打包合并

要求:

  • 阅读 grunt-contrib-concat 插件文档
  • 在 grunt-demo 仓库,添加 concat 分支
  • 复制 rectangle v0.4 项目仓库的 HTML、CSS 和 JavaScript 代码
  • 添加 Gruntfile.js,实现对 JavaScript 代码的打包合并
  • 执行自动化任务,观察自动化构建执行的效果

示例参考:

19. 合并子图

要求:

  • 阅读 grunt-spritesmith 插件文档
  • 在 grunt-demo 仓库,添加 sprite 分支
  • 在当前项目目录下创建 images 目录,切换到 images 目录
  • 运行命令 wget https://sample.wangding.in/spa/icons.tar,下载 icons.tar 文件
  • 运行命令 tar -xf icons.tar,解压 icons.tar
  • 运行命令 rm icons.tar 删除压缩文件
  • 添加 Gruntfile.js,实现子图合并
  • 执行自动化任务,观察自动化构建执行的效果
  • 在 dist 目录下,添加 index.html 文件,引用生成后的 CSS 文件
  • 在 dist 目录下,启动 web 静态文件服务
  • 在浏览器中查看 index.html 页面效果

示例参考:

20. HTTP 接口测试

要求:

  • 阅读 grunt-run 插件文档
  • 在 grunt-demo 仓库,添加 http-api-test 分支
  • 添加 app.js 脚本代码,实现矩形计算器的 HTTP API 接口
  • 接口 URL:http://localhost:8080/rectangle?width=20&height=20
  • 接口返回信息格式:{'code': 200, 'reason': '查询成功', result: {'area': 400, 'perimeter': 80}}
  • npm 安装 grunt、chai、grunt-mocha-cli 和 grunt-run 插件
  • 创建 test 文件夹
  • 在 test 文件夹,添加接口测试自动化测本代码
  • 测试矩形计算器接口
  • 添加 Gruntfile.js,实现接口 Web 服务的启动和关闭
  • 实现对矩形计算器 HTTP API 接口的自动化测试
  • 运行 grunt 命令,观察自动化测试的效果

示例参考:

21. 矩形计算器 v0.5

要求:

  • 阅读 grunt-contrib-copy 插件文档
  • 阅读 grunt-contrib-clean 插件文档
  • 阅读 grunt-usemin 插件文档
  • npm 安装 grunt-contrib-copy,grunt-contrib-clean,grunt-usemin 三个插件
  • 用 grunt 对 rectangle.js 和 calc.js 两个脚本文件打包后压缩为 dist/bundle.min.js
  • 用 grunt 自动修改 index.html 文件,使用 bundle.min.js
  • 用 grunt 清理构建过程中的临时文件
  • 增加网站图标,Chrome 开发者工具的控制台窗口,不要输出错误
  • 添加页面初始焦点,初始焦点设置为第一个文本框
  • 计算结果文本框不可编辑
  • 设备自适应,页面在手机上可以正常显示
  • 增加必填字段提示
  • 不用考虑数据合法性校验
  • 将 master 分支的代码变更推送 GitHub
  • 用 Chrome 浏览器观察自动化构建并发布的 rectangle 应用
  • 自动化构建包括:静态代码检查、单元测试和代码打包压缩优化

示例参考:

results matching ""

    No results matching ""