在前端开发中，Gulp 是一种非常流行的自动化构建工具。通过定义 Gulp 任务，可以简化我们的开发流程，例如压缩 CSS、JS 文件、合并文件等操作。但是，在某些情况下，我们可能需要根据不同的命令行参数来指定不同的源文件路径，以便让 Gulp 任务可以适应多种场景。
本文将介绍如何使用 Gulp 实现这样的需求，并提供一个示例代码来帮助您更好地理解。
方案设计
假设我们有一个名为 gulpfile.js 的 Gulp 配置文件，并且我们想要实现以下两个任务：
build:dev：用于在开发环境中构建项目。build:prod：用于在生产环境中构建项目。
在开发环境中，我们可能需要对源文件进行调试和测试，因此希望将源文件存放在 src/dev/ 目录下。而在生产环境中，我们则需要对代码进行优化和压缩，因此源文件应该放在 src/prod/ 目录下。
为了能够根据命令行参数来指定不同的源文件路径，我们可以使用 Node.js 内置的 process.argv 对象来获取命令行参数。当我们执行以下命令时：
gulp build:dev --src=src/dev/
process.argv 对象的值将会是：
['/usr/local/bin/node', '/usr/local/bin/gulp', 'build:dev', '--src=src/dev/']
我们可以使用第四个参数来获取源文件路径。
代码实现
接下来，让我们来看一下如何在 Gulp 中实现这个功能。首先，我们需要安装 yargs 模块，用于解析命令行参数：
npm install yargs --save-dev
然后，我们可以在 gulpfile.js 文件中引入 yargs 并创建一个新的对象来解析命令行参数：
const gulp = require('gulp');
const yargs = require('yargs');
const argv = yargs.argv;
const src = argv.src || 'src/dev/';上面的代码会检查是否有 --src 参数传入，并根据其值设置 src 变量的值。如果没有传入该参数，则默认使用 src/dev/ 目录。
接下来，我们可以创建 build:dev 和 build:prod 任务：
-- -------------------- ---- -------
---------------------- ---------- -
------ ------------ - ----------
-------- -- --------- ---
-------------------------
---
----------------------- ---------- -
------ ------------ - ----------
-------- -- --------- ---- ---
-------------------------
---在上面的代码中，我们使用 gulp.src() 方法来指定源文件路径。该方法会根据传入的参数返回一个可读流，以便我们对源文件进行进一步的操作。
最后，我们可以在命令行中执行以下命令：
gulp build:dev --src=src/dev/
或者：
gulp build:prod --src=src/prod/
根据不同的参数值来运行不同的 Gulp 任务，并指定不同的源文件路径。
总结
本文介绍了如何使用 Gulp 实现根据命令行参数指定不同源文件路径的功能，并提供了一个示例代码来帮助您更好地理解。通过这种方式，我们可以让 Gulp 任务更加灵活，适应多种场景的需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/31390