在前端开发中，自动化构建是提高工作效率、减少出错率的重要手段之一。而 Gulp 作为前端自动化构建工具的代表之一，具有易学易用、插件丰富等优点，被越来越多的前端开发者所采用。gulp-newer 就是其中一个 Gulp 插件，它可以让我们只编译修改过的文件，从而加快构建速度，节省时间。
安装
在使用 gulp-newer 之前，需要确保已经安装了 Node.js 和 Gulp，并在项目目录下初始化了 package.json 文件。接下来，在命令行中运行以下命令进行安装：
npm install --save-dev gulp-newer
使用方法
基本使用
首先，在 Gulpfile.js 中引入 gulp-newer：
const newer = require('gulp-newer');然后，通过 gulp.src() 方法获取需要编译的文件，再将其传入 newer() 方法中：
gulp.task('compile', function () {
return gulp.src('src/**/*.js')
.pipe(newer('dist'))
.pipe(gulp.dest('dist'));
});上述代码中，newer() 方法会根据指定的文件夹路径（'dist'）查找该文件夹中已存在的文件，然后将 gulp.src() 获取到的文件与其进行比对，只编译修改过的文件。最后，使用 gulp.dest() 方法将编译完成的文件输出到指定文件夹（'dist'）。
高级使用
指定比对时间
有时候我们需要比对的不是文件是否存在，而是文件的修改时间。在这种情况下，可以通过传递一个对象作为参数来实现：
-- -------------------- ---- -------
-------------------- -------- -- -
------ -----------------------
-------------
----- -------
---- -------- -------------- -
------ ------ - -------------
-
---
-------------------------
---其中，dest 参数依然指定了比对的文件夹路径，map 参数则指定了如何把 gulp.src() 获取到的文件路径转换成比对的文件路径。上述代码中，map 函数会将所有文件的路径前面添加 'src/' 前缀，然后再与 dest 参数组合起来形成目标路径。
指定比对方式
除了默认的 "modification time" 模式外，gulp-newer 还支持 "content hash" 模式和 "stat" 模式。在 "content hash" 模式下，gulp-newer 会通过计算文件内容的哈希值来判断是否需要编译。在 "stat" 模式下，则会比对文件的 stat 对象，以确保文件内容没有变化。可以通过 options.mode 属性来指定比对模式：
gulp.task('compile', function () {
return gulp.src('src/**/*.js')
.pipe(newer({
dest: 'dist',
mode: 'contenthash'
}))
.pipe(gulp.dest('dist'));
});示例代码
以下是一个简单的 Gulpfile.js 文件，演示了如何使用 gulp-newer 来只编译修改过的文件：
-- -------------------- ---- -------
----- ---- - ----------------
----- ----- - ----------------------
-------------------- -------- -- -
------ -----------------------
--------------------
-------------------------
---
------------------ -------- -- -
------------------------- -------------
---
-------------------- -----------在命令行中运行 gulp 命令即可启动监听模式，每当源文件发生修改时，gulp-newer 会自动进行比对，只编译修改过的文件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/51943