在前端开发中，网页截图对于调试、测试以及用户反馈等方面都有极为重要的作用。而 Resemble.js 是一个用于在 Node.js 和浏览器环境下生成两张图片的不同之处的 JavaScript 库。而 grunt-resemble-cli 是这个库的一个 npm 包，可以将这个库集成到 grunt 构建系统中，方便我们在项目构建过程中自动化地截取网页屏幕快照以进行差异分析。
本文将详细介绍 grunt-resemble-cli 的使用方法及其常用配置选项，帮助我们更好地应用它进行项目构建。
安装
首先，我们需要安装 grunt-resemble-cli。这个 npm 包可以从 npm 官网直接下载和安装，也可以在项目根目录下通过以下命令来安装：
npm install grunt-resemble-cli --save-dev
此外，我们还需要引入一些必要的 grunt 插件，包括 grunt-contrib-connect、grunt-contrib-clean、grunt-mkdir 以及 grunt-changed。它们可以通过 npm 来安装，具体的安装命令如下：
npm install grunt-contrib-connect grunt-contrib-clean grunt-mkdir grunt-changed --save-dev
基本配置
在成功安装了 grunt-resemble-cli 以及相关插件后，我们就可以开始配置任务了。下面是一段典型的配置示例：
-- -------------------- ---- -------
-------------- - --------------- -
-- ----
--------------------------------------------
------------------------------------------
----------------------------------
------------------------------------
-----------------------------------------
-- ----
------------------
--------- -
-------- -
-------- -
------- -
----------- -
---- ----
------ --
----- ---
--
---------- -----------
------------- ----
-------------------- ------
--------------- ------
----------- -----
------------ ------
------------------- -----
--------------------- --
--------- -
-
------- ---
------ ----
-- --
-- -
-
-
--
---------------- -----
------- --------------
--
------ -
-
------- -----
---- --------------------------
----- -----------
------- -------------- ---- -
------ ---- - --- - -------------------- --------
-
-
-
-
--
-------- -
------- -
-------- -
----- ----
-
-
--
------ -
-------------- --------------------
------------ ------------------
-------------- -------------------
--
------ -
---------- -
-------- -
------- -------------
-
--
-------- -
-------- -
------- -----------
-
--
---------- -
-------- -
------- -------------
-
-
--
-------- -
---- -
------ -----------
------ ----------------------- ------------------ ---------- ----------- ---------------------- ------------------ --------------- --------------------
-
--
----- -
-------- -
------ -
-
------- -----
---- ------------------
----- -------------
------- -------------- ---- -
------ ---- - --- - -------------------- ------------
-
-
-
-
-
---
-- ----
----------------------------- -------------
--上述配置主要包括以下任务：
- connect: 用于启动一个本地服务器，从中获取到我们要截取的网页。
- clean: 用于清除之前捕捉到的快照，结果以及视觉参考图片。
- mkdir: 用于创建保存捕捉到的快照、结果以及视觉参考图片的文件夹。
- changed: 监听
*.html文件的变化，并在文件发生变化时重新生成差异分析结果。 - resemble: 利用 Resemble.js 对捕捉到的快照进行差异分析，并将结果保存到
results/文件夹中。 - copy: 用于将差异分析的结果保存为视觉参考图片。
细节说明
resemble任务:options: 描述了 Resemble.js 的差异分析选项。files: 匹配需要进行差异分析的图片，所有对应的匹配结果保存为results/文件夹下的一个名为*.png的文件。
copy任务:- 将以差异分析结果保存在
results/文件夹下的所有文件复制到reference/文件夹中。 - 将所有从
results/文件夹中复制的文件重命名成在*.ref.png的格式下。因为这是一份视觉参考文件，是每次差异分析调整的基础，可以与实际结果进行对比、验证。
- 将以差异分析结果保存在
changed任务:- 用于监视
*.html文件的变化，如果有更改，它将清除旧的捕捉的快照、结果以及视觉参考图片，并重建它们。
- 用于监视
connect任务:- 启动本地服务器，我们可以在它上面获取需要截图的网址。
clean任务:- 清除它们以前的老版本捕捉的快照、结果以及视觉参考图片。
总结
grunt-resemble-cli 可以让我们自动化地截取网页截图，减少了繁琐的手动操作和重复的工作。通过运用 grunt-resemble-cli 及 Resemble.js，我们可以在项目构建阶段就可以快速检测网页的模块变化、增加、删除等，以便及时发现并解决问题。
希望本文对广大前端开发工程师对 grunt-resemble-cli 的使用有所启发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedcc94b5cbfe1ea061280f