</lylijincheng>

在 Web Starter Kit 上构建前端开发工作流

Web Starter Kit 是 Google 为 Web 开发者提供的一套模板,包括跨平台的构建工具和一套可视化的项目开发向导。如果你用过 Mobile HTML5 Boilerplate 和 Yeoman’s generator-gulp-webapp, WSK 会是一个非常不错的二者的结合。

设置环境

Web Starter Kit 依赖 NodeJS,NPM,Ruby(Sass),因此需要安装好这些运行环境所需的工具软件。WSK 使用 Gulp 自动化工具来构建项目,使用 Sass 做 CSS 预处理和编译,而 Sass 依赖 Ruby 来工作,所以需要 Ruby 运行环境。准备好了依赖环境,就可以开始一个简单的项目了:

  1. 从 Google 开发者网站下载 Web Starter Kit 并切换到解压后的目录 https://developers.google.com/web/starter-kit/

  2. 安装依赖 npm install

  3. 启动服务 gulp serve

Gulp 构建工具

使用自动化构建工具 Gulp 创建一系列自动化任务,并且可以并行运行这些任务:

如果想要快速了解并使用 Gulp 构建项目,可以参考 Gulp cheatsheet 以及 Gulp API docs.

开发阶段

启用本地服务

1
gulp serve

这个任务会在项目的 app 目录下面启动一个本地 HTTP 服务,开发及调试任务将在此服务下进行。此时可以构建程序可以监听本地文件变化做到浏览器自动刷新(Live reload),多设备同步测试,自动添加 CSS 属性浏览器前缀(Autoprefixer),检查 JavaScript 语法,自动编译 Sass 文件为 CSS 等。

构建 production 版本

1
gulp serve:dist

dist 任务会优化开发版本,成为测试或生产版本,如压缩、合并 CSS,JavaScript,HTML。使用 build block 注释的方式处理 HTML 文件,替换资源引用路径,文件名等使其成为上线版本。除此之外,还会优化图片资源,比如删除 JPEG 和 PNG 中的无用的 meta 信息,SVG 中的空白,注释或不需要的属性等。

开发工具

IDE

推荐的 IDE 为 Sublime Text。Sublime 有大量的插件可以提高开发效率:

  • Emmet – HTML 代码片段自动完成
  • Git Gutter – 标识 Git 跟踪文件的变更 diff 信息
  • HTML-CSS-JS Prettify – 格式化 HTML,CSS,JavaScript (Ctrl+Shift+H)
  • DocBlockr – 自动插入块级注释
  • JavaScriptNext – ES6 语法高亮主题

设置 CLI 快捷方式

使用 Git 跟踪管理代码参考,自然会涉及到很多提交,更新等常用操作,如果对一写常用的 Git 命令使用别名简化,会大大提高这些操作的效率。Git 可以设置别名,这一点非常好:

1
2
3
4
5
git config --global alias.co checkout
git config --global alias.ci commit
git config --global alias.st status
git config --global alias.br branch
git config --global color.ui true

除了在终端设置外,还可以编 ~/.gitconfig 文件来设置。

目前很多项目要依赖服务的环境来运行,如果要启动一个临时的服务,可以使用 Python 或 node-static 在需要的目录启动一个简单的服务。同时可以给命令设置一个别名:

1
alias server="python -m SimpleHTTPServer"

使用 node 建立一个静态服务器,前提要在全局安装 node-satic 模块:

1
2
3
4
npm install -g node-static

static
> serving "." at http://127.0.0.1:8080

推荐主题

参考文档

Comments