对于前端开发者来说，构建工具是必不可少的一个环节。其中，gulp 作为前端项目自动化构建工具，其插件库中有很多实用的插件，如 gulp-cache-changed。这个小巧的 npm 包可以让我们在开发过程中，只编译或压缩被修改过的文件，提高了项目构建效率，减少编译时间。
安装 gulp-cache-changed
要使用 gulp-cache-changed，首先需要在项目中安装它，可以通过 npm 安装：
npm install --save-dev gulp-cache-changed
安装完成后，即可在 gulpfile.js 中使用 gulp-cache-changed。
使用 gulp-cache-changed
gulp-cache-changed 的使用非常简单。我们可以在 gulpfile.js 中定义一个任务，例如：
const gulp = require('gulp');
const changed = require('gulp-cache-changed');
gulp.task('build', function() {
return gulp.src('./src/**/*.js')
.pipe(changed('./dist'))
.pipe(gulp.dest('./dist'));
});这个任务的作用是将 ./src 目录下的所有 js 文件编译后输出到 ./dist 目录下。在执行任务时，gulp-cache-changed 会检测源文件和目标文件的修改时间，如果源文件修改过了，才会进行编译和输出操作。否则，gulp-cache-changed 会跳过此次任务，从而提高构建效率。
例子说明
为了更好地理解 gulp-cache-changed 的使用方法，下面演示一个简单的例子。
假设有一个目录结构如下的项目：
|-src
|-a.js
|-b.js
|-c.js
|-dist
|-a.js其中，a.js 文件已经在 dist 目录中存在了，我们只需要编译 b.js 和 c.js 文件，然后输出到 dist 目录即可。
gulpfile.js 可以这样写：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------- - ------------------------------
----- ----- - ----------------------
------------------ -------- -- -
------ ----------------------
------------------------
-------------
-------- --------------
---
---------------------------
---当我们第一次执行 gulp build 任务时，所有的源文件都会被编译并输出到 dist 目录中。此时，对于后续的任务，gulp-cache-changed 会记录每个文件的修改时间，只有源文件被修改过的时候，才会重新编译输出。
我们可以手动修改 src 目录下的 b.js 文件，执行一次 gulp build，可以看到只编译了被修改的 b.js 文件，并将编译后的文件输出到 dist 目录中。
深入理解 gulp-cache-changed
gulp-cache-changed 通过缓存每个文件的修改时间，来判断源文件是否需要重新编译。实现原理如下：
首先，遍历源文件，获取每个文件的路径和修改时间。
将每个文件的路径和修改时间存储在内存中。
在后续执行任务时，遍历源文件，根据文件路径对比内存中保存的修改时间，如果源文件的修改时间比较新，那么说明源文件被修改过，需要重新编译输出。
如果源文件的修改时间比较老，说明源文件没被修改过，可以跳过此次任务。
总结
gulp-cache-changed 是一个非常实用的 npm 包，可以在前端项目自动化构建中节省构建时间，提高构建效率。熟练使用 gulp-cache-changed，可以让你的项目打包速度飞快，效率倍增。在实践中，需要根据具体情况灵活应用，才能发挥出它的最大作用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f82238a385564ab6bc9