前端开发构建工具

-----------------------------------------------------------------------------------------------------------------------------------

了解如何使用一套构建流程工具加快开发速度和创建快速加载的网站。每个网站均应有一个开发版本和一个生产版本。

开发版本具有构成网站的所有 HTML、CSS、JS 和图像文件，且格式清爽，便于您处理。

生产版本将提取并缩小这些文件，然后对这些文件（如图像）加以串连/合并和优化。

网络开发者必须同时考虑很多事情，构建步骤就是一开始要处理的最重要也是最棘手的事情之一。您必须弄清楚所有需要自动化的任务，例如：图像压缩、CSS 缩小、JavaScript 串连、响应测试、单元测试，不一而足。

按照本指南了解构建工作流的最佳方法，从而确保您创建的网站从开始构建之时即遵循了所有最佳做法。

开始编码之前，需要考虑如何优化和构建网站的生产版本。从头开始设置此工作流可以避免项目结束时出现任何糟糕的意外，而且您可以将工具添加到工作流中为您执行单调枯燥的任务，从而加快开发速度。

什么是构建流程？

构建流程是一组针对项目文件运行的任务，主要是在开发期间编译和测试代码，以及用于创建网站开发版本。构建流程不应是一组在开发工作流结束时运行的任务。

实现构建流程最热门的工具是 Gulp 和 Grunt，二者都是命令行工具。

如果您对这两款工具都没有使用经验，请使用 Gulp，我们在 Web Starter Kit 中就是使用它，因此建议您也使用它。

很多工具都具有 GUI，而且可能更容易掌握，但不是很灵活。

在下文中，我们将介绍在构建流程中应执行的最常见任务，以及在使用 Grunt 和 Gulp 时我们建议执行的任务。

这需要执行大量试错工作，以按照您希望的方式完成一切设置，如果您不熟悉构建流程，这可能会令您感到气馁。

要获取一个好的构建流程示例，请查阅Web Starter Kit 入门指南，该指南详细介绍了如何使用 Web Starter Kit，并解释了 Gulp 文件中每个命令的作用。您可以将此示例作为快速设置方式，然后根据需要加以更改。

如果您想要创建自己的构建流程，但又不熟悉 Gulp 和 Grunt，此快速入门指南将是您了解如何安装和运行您的首个构建流程的最佳途径：

对于不熟悉串连和缩小这两个术语的开发者，串连就是指将多个文件合并在一起，例如将多个文件复制粘贴到一个文件中。我们这样做的原因是它更为有效，因为浏览器只需获取一个文件，而不是很多小文件。

缩小是指提取文件并减少总字符数、但不更改代码工作方式的过程。删除注释或提取一个长变量名称并缩小该名称就是一个很好的例子。这样可以减小文件大小，从而加快下载速度。

对于缩小，使用以下插件：

对于串连，使用以下插件：

文件类型	Gulp	Grunt
CSS (Sass)	gulp-sass 或 gulp-useref	grunt-contrib-sass 或 grunt-usemin
JS	gulp-useref	grunt-usemin 或 grunt-codekit

注：您可以通过利用“导入”功能来使用 Sass（请参见 Web Starter Kit 中的示例）。

图像优化是帮助加快网站速度的一个重要步骤；在不损害图像质量的情况下缩小图片的幅度会让您大吃一惊．元数据会从图像中删除，因为浏览器不需要元数据即可显示图像，例如有关拍摄照片所用相机的信息。

对于图像优化，您可以使用以下模块。

Gulp 和 Grunt
gulp-imagemin	grunt-contrib-imagemin

为您使用的 CSS 包含所有供应商前缀通常是有点单调的任务。使用前缀自动补全工具自动添加需要包含的前缀：

Gulp 和 Grunt
gulp-autoprefixer	grunt-autoprefixer

实时重新加载会在您每次做出更改后在浏览器中更新您的网站。只要使用一次，就再也离不开它了。

Web Starter Kit 使用 browser-sync 提供实时重新加载支持。

Gulp 和 Grunt
browser-sync	grunt-contrib-connect 和 grunt-contrib-watch

注：如果您喜欢实时重新加载这一想法，但不想有构建流程，请参阅 Addy Osmani 撰写的有关 HTML5Rocks 的文章，其中介绍了各种替代方案（有些是免费的，有些是商业的）。