在前端开发中，我们经常需要对文件进行过滤和筛选，此时使用 gulp-filter 可以非常方便地实现这些功能。gulp-filter 是一款基于流的文件筛选插件，可以帮助我们从文件流中选择需要处理的文件。
安装
使用 npm 安装 gulp-filter：
--- ------- ---------- -----------
基本用法
下面是一个简单的示例代码，演示了如何使用 gulp-filter 对文件进行过滤：
----- ---- - ----------------
----- ------ - -----------------------
-------------------- ---------- -
-- ------ --- --
----- --------- - ------------------ - -------- ---- ---
------ ------------------------
---------------- -- --- --- --
-------- -------- ---- -- ---
-------------------------- -- - --- ---------
-------------------------
---在上面的代码中，我们首先创建了一个名为 cssFilter 的 gulp-filter 实例，用于过滤出所有的 CSS 文件。然后通过 gulp.src 方法读取源文件，将文件流传递给 cssFilter 这个过滤器，只有符合过滤条件的文件才会被处理。处理完之后，我们再次调用 cssFilter.restore() 方法，将 CSS 文件恢复到文件流中，最后将处理好的文件流输出至 dist 目录。
需要注意的是，在使用 gulp-filter 时，过滤器实例必须通过 restore 属性设置为 true 才能够正常工作。这是因为 gulp-filter 的内部实现机制是在处理完所有文件之后再将被过滤掉的文件恢复到文件流中，然后再按照原来的顺序进行处理。如果不将 restore 属性设置为 true，那么就无法正确地将被过滤掉的文件恢复到文件流中。
进阶用法
除了基本用法外，gulp-filter 还提供了一些高级特性，可以帮助我们更加灵活地处理文件流。
多个过滤条件
如果我们需要同时过滤多个条件下的文件，可以像下面这样创建多个 gulp-filter 实例：
----- -------- - ------------------ ----------------- - -------- ---- --- ----- --------- - ------------------ - -------- ---- --- ------ ------------------------ --------------- -- --- -- ----- ---------- -------- -------- ---- -- --- ------------------------- -- -- -- ------- ---------------- -- --- --- -- -------- -------- ---- -- --- -------------------------- -- - --- --------- -------------------------
在上面的代码中，我们创建了两个 gulp-filter 实例，一个用于过滤出所有的 JS 文件（排除 jquery.js），另一个用于过滤出所有的 CSS 文件。接着通过 gulp.src 方法读取源文件，将文件流传递给 jsFilter 这个过滤器，只有符合过滤条件的 JS 文件才会被处理，并按照顺序依次执行其他的 gulp 插件。处理完之后，我们再次调用 jsFilter.restore() 方法，将 JS 文件恢复到文件流中，然后继续传递给 cssFilter 过滤器，只有符合过滤条件的 CSS 文件才会被处理，最后输出到 dist 目录。
动态生成过滤条件
如果我们需要根据一些动态的条件来决定是否对文件进行处理，可以使用
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/49715