设置你的构建工具

学习如何通过一组构建过程工具提升开发效率和创建快速加载的网站。每个网站都应该有一个开发版本和一个生产版本。

开发版本具有所有的HTML，CSS，JS和图像文件，如果你的网站结构很干净，这样你很乐意为之工作。

生产版本将获取这些文件，压缩，合并它们并优化图像等文件。

Web开发人员必须同时考虑很多事情，而构建是最关键的步骤之一，但最麻烦的是开始。你必须解决你需要自动化的所有任务，如：图像压缩，CSS压缩，JavaScript合并，响应测试，单元测试，等等...

按照本指南学习构建工作流的最佳方式，以便您开发的网站从一开始就已经遵循所有的最佳做法。

TL;DR

• 您的构建过程工具必须针对性能进行优化;他们应该自动压缩和合并JavaScript，CSS，HTML和图像。
• 使用LiveReload等工具使您的开发过程更顺利。

在开始编码之前，您需要考虑如何优化和构建您的网站的生产版本。从一开始就设置工作流可以防止在项目结束时任何令人讨厌的事情。您可以在工作流程中添加工具来为你完成单调枯燥的工作，这样可以加快你的开发。

什么是构建过程

构建过程是一组在您的项目文件上运行的任务，在开发期间编译和测试代码，并且部署站点。您的构建过程不仅仅是在开发工作流程结束时运行的一组任务。

用于实现构建过程的最流行的工具是Gulp和Grunt，这两者都是命令行工具。如果你没有任何经验，建议使用Gulp，我们通过Web Starter Kit使用Gulp，并建议你做同样的。

下面是一些GUI工具，可能更容易掌握，但不太灵活。

在构建过程中应该有什么任务？

在以下部分中，我们将为你介绍在构建过程中应该执行的最常见任务，推荐几款Grunt和Gulp任务。

如果是新创建的过程，可能需要大量的试错，以得到你想要的设置方式，这令人生畏。

有一个很好的构建过程的例子，请查看Web Starter Kit入门指南，这篇文章介绍如何使用Web Starter Kit，并解释了Gulp文件中的每个命令的作用。这可以用作快速设置的方法，并且您可以根据需要进行更改。

如果你正在寻找创建构建过程的方法，并且你是Gulp或Grunt的新手，快速入门指南将是安装和运行您的第一个构建过程的最佳教程：

• Grunt入门
• Gulp入门

合并和压缩资源使网站更快

concatenation是简单地将多个文件合并在一起，即将多个文件复制并粘贴到一个文件中。我们这样做的原因是，相对于大量的小文件，浏览器获取一个文件的效率更高。

minification是压缩文件和使文件字符数减少，而不改变代码的工作原理。一个很好的例子是删除注释，或者使一个长的变量名变小。这使得文件更小，使得下载更快。

要进行压缩，请使用以下模块：

要进行合并，请使用以下模块：

注意： 您可以利用 import 功能使用Sass（例如，参见Web Starter Kit）。

优化您的图片

图片优化是加快网站速度的重要步骤;你会惊讶的发现，你可以做出一张更小的图片，而不会损失图片质量。meta data(元数据)会被从图像中删除，因为浏览器显示图像不需要他们，例如，拍摄照片的相机的信息等。

要优化图片，您可以使用这些模块。

不要使用浏览器前缀

在CSS中包含所有浏览器供应商前缀，显的有点冗余。使用auto-prefixer功能自动添加前缀：

注意:如果你愿意，你可以添加一个Sublime包为你自动添加前缀。

实时重新加载页面与资源

每次进行修改时，在浏览器中实时重新载入网站。 使用一次后，你肯定会喜欢上它。

Web Starter Kit使用browser-sync来支持实时重载。