认识gulp-if：让Gulp任务条件执行的终极入门指南

认识gulp-if：让Gulp任务条件执行的终极入门指南

【免费下载链接】gulp-ifConditionally run a task项目地址: https://gitcode.com/gh_mirrors/gu/gulp-if

gulp-if 是 gu/gulp-if 项目下的一个轻量级 Gulp 插件，它的核心功能就是条件执行 Gulp 任务：像一枚智能开关一样插在 Gulp 的流式管道中间，根据布尔值、函数或文件路径等条件，灵活决定每个文件是否继续走后续的处理流程。这篇 gulp-if 入门教程面向新手，带你从零完成安装，掌握条件判断、三元分流等核心用法，并附上参数速查与高频踩坑提醒，轻松搞定 Gulp 任务条件执行。

gulp-if是什么：给Gulp构建流程装上智能开关 🚀

Gulp 的构建过程本质上是一条"文件流水线"：gulp.src()读取源文件，经过一串.pipe()处理步骤（如压缩、转译、校验），最后gulp.dest()输出结果。问题在于，很多场景下我们并不想对所有文件"一视同仁"——比如只在生产环境才压缩 JS，或者只对特定目录下的文件做校验。

gulp-if 就是为解决这类问题而生的。它本身不处理文件，而是作为条件分支器插入管道：每个文件流经它时，都会被问一句"要不要执行下一步？"。它的实现非常轻量，核心逻辑只有几十行，你可以直接查看 index.js 源码感受一下。

如上图所示，gulp-if 根据条件判断结果决定文件的流向，但无论走哪条分支，文件最终都会继续向下游输出，不会"凭空消失"。

为什么需要gulp-if：告别散落的临时判断 💡

在引入 gulp-if 之前，想在管道中间做条件判断是件很别扭的事：要么把任务拆成多个重复的 gulp task，要么手写临时流判断，代码又长又难维护。gulp-if 的价值在于把"判断"封装成一个标准 Gulp 插件，一行代码即可插入任意管道位置，既符合 Gulp 的声明式风格，也让构建逻辑一目了然。

gulp-if安装教程：一行命令快速完成

安装 gulp-if 非常简单，在项目根目录执行：

npm install --save-dev gulp-if

gulp-if 依赖于gulp-match、ternary-stream、through2三个包，安装时会自动带上，无需额外操作。完整依赖清单可参考项目里的 package.json。安装完成后，在 gulpfile 中引入即可开始使用：

var gulpif = require('gulp-if');

gulp-if条件判断的3种核心用法

这是文章的重头戏。gulp-if 最灵活的地方在于，condition参数支持多种写法，下面逐一说明。

用法一：布尔值条件——最简单的"总开关"

直接把true或false作为条件，适合开关式的场景，例如只在生产环境压缩代码：

var condition = isProduction; // true 或 false gulp.src('./src/*.js') .pipe(gulpif(condition, uglify())) .pipe(gulp.dest('./dist/'));

小技巧：当条件是静态布尔值时，gulp-if 会直接短路——条件为假时甚至不会加载传入的插件流，性能开销几乎为零。这一行为在 index.js 中有明确优化，相关行为测试见 test/boolean.js。

用法二：函数条件——按文件内容动态判断

条件可以是函数，每个文件流经时都会调用一次，接收当前 vinyl 文件对象并返回布尔值。这是最灵活的方式，适合按文件名、内容等做精细控制：

var condition = function (file) { return file.path.indexOf('dist') === -1; // 跳过 dist 目录 }; gulp.src('./src/**/*.js') .pipe(gulpif(condition, uglify())) .pipe(gulp.dest('./dist/'));

用法三：正则与glob条件——按文件路径匹配

condition也可以直接传正则表达式或 glob 模式，gulp-if 会用它对file.path进行匹配（底层走 gulp-match）。比如只压缩非测试文件：

gulp.src('./src/*.js') .pipe(gulpif('!**/*.spec.js', uglify())) .pipe(gulp.dest('./dist/'));

上图展示了利用 glob 模式从源头排除指定文件、只放行其余文件的典型流程，这种方式速度最快，因为被排除的文件从未进入后续管道。

gulp-if三元表达式：一个插件实现双分支分流

gulp-if 的进阶用法是传入第三个参数elseStream，实现"条件为真走 A 流程，为假走 B 流程"的三元分流：

gulp.src('./src/*.js') .pipe(gulpif(condition, uglify(), beautify())) .pipe(gulp.dest('./dist/'));

条件成立时文件走uglify()压缩，不成立则走beautify()美化，两条分支最终都会汇入下游输出。这个用法在项目的 README.md 中有详细示例和图示。

gulp-if高级玩法：与lazypipe组合打造子管线

如果你的某个分支需要串联多个插件，可以结合 lazypipe：先定义一个可复用的子管线，再通过函数把它"装进" gulp-if 的分支里，从而实现复杂的分支逻辑复用。项目中 README.md 给出了完整的 lazypipe 组合示例，值得进阶读者细读。

gulp-if API参数速查表 📋

需要提醒的是：如果条件为假且未提供elseStream，文件会直接放行到下游，不会被丢弃。

新手使用gulp-if的注意事项 ⚠️

1. 插件行为要规范：gulp-if 本身很稳定，但如果你搭配的插件行为不标准，条件分支下可能表现异常。遇到问题时先单独测试插件本身。
2. 静态布尔条件最省性能：能用true/false就不要写函数，可以避免不必要的逐文件判断。
3. 函数条件逐文件调用：在函数里做文件级判断时，注意避免在循环中产生副作用。
4. 别忘了 elseStream 的存在：不是所有"不满足"都要丢弃文件，用三分支可以实现更多编排。

结语：动手试试吧 ✨

gulp-if 用极小的体积解决了 Gulp 构建中高频出现的"条件执行"痛点，是构建配置里值得常备的插件。想深入研究的读者，可以直接 clone 项目查看源码与完整测试：git clone https://gitcode.com/gh_mirrors/gu/gulp-if。测试用例覆盖了布尔、函数、路径匹配等各类条件，见 test/fn.js、test/load.js，配合 img/ 目录下的流程图，理解起来事半功倍。现在，就把它装进你的 gulpfile 试试吧！

【免费下载链接】gulp-ifConditionally run a task项目地址: https://gitcode.com/gh_mirrors/gu/gulp-if