介绍
grunt-newer 是一个 Grunt 插件，用于检测指定任务的源文件是否已经过修改，并只对有修改的文件进行重新编译或处理。这样可以大大节省构建时间和资源。
安装
在项目根目录下执行以下命令安装 grunt-newer 插件：
npm install grunt-newer --save-dev
配置
在 Gruntfile.js 文件中添加以下配置：
-- -------------------- ---- -------
-------------- - --------------- -
------------------
-- ---
------ -
-------- -
-- -------
------ ---------------
-- ------------ -- --
--------- ------
-- ------ ---------- - ---------- --
------- ----
-
--
-- ---
---
-- -- ----------- --
----------------------------------
-- ----
----------------------------- -----------
--其中，options 参数用于配置插件的行为，具体说明如下：
cache：指定缓存文件夹的名称，默认为.newer-cache；override：是否强制更新缓存，默认为false；ignore：是否忽略.gitignore和.npmignore文件中指定的文件，默认为true。
示例
假设我们要将 src 目录下的所有 .js 文件进行处理，并将结果输出到 dist 目录中。如果使用普通的 grunt 任务，每次都会对所有文件进行重新处理，效率比较低下。现在我们可以使用 grunt-newer 插件来加速构建过程。
-- -------------------- ---- -------
-------------- - --------------- -
------------------
-- ---
------ -
-------- -
------ --------------
-
--
------ -
-------- -
---------- -----
-------- ---------------------
--
------ --
------- -----
---- ------
---- ------------
----- ------
--
--
-- ---
---
-- -- ----------- - ----------- --
----------------------------------
----------------------------------
-- ----
----------------------------- -----------------
--上述配置中，我们首先定义了一个 newer 任务，并指定了缓存文件夹名称为 .newer-cache。然后定义了一个 babel 任务，用于将 src 目录下的所有 .js 文件转换为 ES5 语法，并输出到 dist 目录中。最后，我们将 newer 任务和 babel 任务组合成一个默认任务，并指定只有 babel 任务受缓存控制。
这样，在执行 grunt 命令时，grunt-newer 插件会自动检测 src 目录下的所有 .js 文件是否有修改，如果没有修改，则直接跳过 babel 任务，否则执行 babel 任务进行必要的处理。
总结
使用 grunt-newer 插件可以大大提高前端项目的构建效率，特别是当项目中含有大量文件时。我们只需要针对需要加速的任务添加 newer 前缀即可，非常方便和灵活。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/51072