核心要点
gulpfile.js
中编写任务函数,并从命令行执行它们。但是,它不支持将命令行参数传递给任务使用。process.argv
属性返回一个数组,其中包含进程、脚本和所有命令行参数。可以在 gulpfile.js
中解析此数组,以创建包含参数值的物件。我非常喜欢 Gulp.js,最近的调查显示,近 44% 的前端开发者正在使用 Gulp 任务。
Gulp 的简洁性是其最吸引人的特性之一。您可以在 gulpfile.js
中编写任务函数:
<code class="language-javascript">gulp.task('doSomething', () => { // 执行某些操作 });</code>
然后使用 gulp doSomething
从命令行执行该任务。任务可以像您喜欢的那样简单或复杂,并且可以包含进一步的子任务。
但是,无法传递可在该任务中使用的命令行参数,例如:
<code class="language-bash">gulp doSomething --option1 "my string" --option2 123 --option3</code>
(其中 option3
等于 true
)
这些参数将传递给 Gulp 应用程序本身,而不是您的任务。Gulp 不了解这些值,因此它们在 gulpfile.js
中不可用,并且无法在您的任务函数中进行检查或使用。
通常不需要——否则,多年前就会添加将参数传递给任务的功能!Gulp 任务是用 JavaScript 编写的,因此您可以在代码中设置默认值。
您还可以分析环境变量,例如 NODE_ENV
。例如,您可以检查该值是否在实时服务器上设置为 production 或类似的值。然后,该设置可用于确定在任务运行时是否缩小 JavaScript 源文件,例如:
<code class="language-javascript">// 这是开发版本吗? const devBuild = ((process.env.NODE_ENV || 'development').trim().toLowerCase() === 'development'); // Gulp 插件 const stripdebug = require('gulp-strip-debug'); // 删除调试代码 const uglify = require('gulp-uglify'); // 压缩 // 构建 JavaScript gulp.task('js', () => { let jsbuild = gulp.src('src/js/*') .pipe(some-plugin1()) .pipe(some-plugin2()); // 生产服务器任务 if (!devBuild) { jsbuild = jsbuild .pipe(stripdebug()) .pipe(uglify()); } return jsbuild.pipe(gulp.dest('build/js/')); });</code>
您现在可以在运行 gulp js
任务之前,在 Linux/Mac 上设置 export NODE_ENV=production
,或在 Windows 上设置 NODE_ENV=production
。然后,它会在压缩 JavaScript 文件之前删除 console.log
和 debugger
语句。
最后,如果您希望任务执行略有不同的操作,您可以创建一个新任务。可以将任务链接在一起,以便根据需要按顺序运行,例如:
<code class="language-javascript">gulp.task('doSomething', () => { // 执行某些操作 });</code>
运行 gulp doSomething1
将执行第一个任务。运行 gulp doSomething2
将按顺序执行这两个任务,因为 doSomething1
在任务名称后的可选数组中定义为依赖项。
当有更好的替代方案时,应避免使用参数。您的 --option1
参数可能会在下一个 Gulp 版本中成为有效的命令行选项,并产生不良后果。
也就是说,总有一些特殊情况……
您通常应避免将凭据(例如 ID 和密码)硬编码到 gulpfile.js
中。考虑以下任务,该任务使用 vinyl-ftp 插件将文件部署到服务器:
<code class="language-bash">gulp doSomething --option1 "my string" --option2 123 --option3</code>
(诚然,FTP 不是一个很好的部署方法,但许多开发人员仍在使用它,并且它可能是某些主机上的唯一选择。)
这种方法存在几个问题:
gulp deploy
。对于希望控制部署时间的较大团队来说,这不太理想。gulpfile.js
以确保部署任务仍然有效。Gulp 可用于除典型网站任务以外的其他用途。例如,您可能有一些通用任务来清除文件夹、创建数据库、传输文件等。硬编码数据库或文件夹名称等内容会降低这些任务的实用性。
想象一下一项涉及数十个插件的复杂任务。如果将其拆分为多个子任务不切实际,则在运行任务之前,直接编辑 gulpfile.js
以添加配置选项可能会变得很困难。
您可能会想到更多特殊情况(欢迎评论!)
Node.js 中的 process.argv
属性返回一个数组,其中包含进程、脚本和所有命令行参数。例如,gulp task1 --a 123 --b "my string" --c
返回以下数组(值可能因您的操作系统和设置而异):
<code class="language-javascript">// 这是开发版本吗? const devBuild = ((process.env.NODE_ENV || 'development').trim().toLowerCase() === 'development'); // Gulp 插件 const stripdebug = require('gulp-strip-debug'); // 删除调试代码 const uglify = require('gulp-uglify'); // 压缩 // 构建 JavaScript gulp.task('js', () => { let jsbuild = gulp.src('src/js/*') .pipe(some-plugin1()) .pipe(some-plugin2()); // 生产服务器任务 if (!devBuild) { jsbuild = jsbuild .pipe(stripdebug()) .pipe(uglify()); } return jsbuild.pipe(gulp.dest('build/js/')); });</code>
可以在 gulpfile.js
中解析此数组。以下代码创建一个名为 arg
的物件,其中包含参数值:
<code class="language-javascript">gulp.task('doSomething1', () => { return gulp.src('src/*') .pipe(some-plugin1()) .pipe(gulp.dest('build/')); }); // 首先运行 doSomething1 gulp.task('doSomething2', ['doSomething1'], () => { // 执行其他操作 return gulp.src('src/*') .pipe(some-plugin2()) .pipe(gulp.dest('build/')); });</code>
该函数循环遍历 process.argv
数组。当它遇到以一个或多个破折号开头的值时,它会在 arg
物件中创建一个新的命名值,该值设置为 true
。当它遇到没有破折号的值时,它会将前一个命名值(如果可用)设置为该字符串。
当我们运行 gulp task1 --a 123 --b "my string" --c
时,arg
物件设置为:
<code class="language-javascript">gulp.task('doSomething', () => { // 执行某些操作 });</code>
因此,我们可以根据需要检查和使用这些值。
假设 arg
设置在 gulpfile.js
的顶部,我们可以重写我们的 FTP 部署任务,以便我们可以传递:
--user
或 --u
参数--password
或 --p
参数<code class="language-bash">gulp doSomething --option1 "my string" --option2 123 --option3</code>
只有在我们使用适当的 FTP 凭据运行任务时,才会发生部署,例如:
<code class="language-javascript">// 这是开发版本吗? const devBuild = ((process.env.NODE_ENV || 'development').trim().toLowerCase() === 'development'); // Gulp 插件 const stripdebug = require('gulp-strip-debug'); // 删除调试代码 const uglify = require('gulp-uglify'); // 压缩 // 构建 JavaScript gulp.task('js', () => { let jsbuild = gulp.src('src/js/*') .pipe(some-plugin1()) .pipe(some-plugin2()); // 生产服务器任务 if (!devBuild) { jsbuild = jsbuild .pipe(stripdebug()) .pipe(uglify()); } return jsbuild.pipe(gulp.dest('build/js/')); });</code>
正如我们所看到的,使用少量自定义代码,可以将参数传递给 Gulp 任务。虽然您的任务通常不需要接收参数,但我们看到在某些情况下它非常有用。这绝对是您工具箱中应该掌握的一项好技术。
参数解析代码可用于任何 Node.js 命令行进程。但是,如果您在非 Gulp 项目中需要它,则 commander 模块提供了更强大的功能。
我希望您觉得这有用。当然,仅仅因为您可以将参数传递给 Gulp 任务,并不意味着您应该这样做!如果您想出更多此方法的良好用例,请在评论中告诉我。
本文由 Tim Severien 审核。感谢所有 SitePoint 的同行评审者,使 SitePoint 内容达到最佳状态!
可以使用 process.argv
数组从命令行将参数传递给 Gulp 任务。此数组包含在启动 Node.js 进程时传递的命令行参数。此数组的前两个元素是 Node.js 可执行文件的路径和 Gulp 文件的路径。任何其他参数都将从第三个位置开始添加到此数组中。您可以通过对 process.argv
数组进行索引来访问 Gulp 任务中的这些参数。
是的,您可以使用 yargs 或 minimist 等软件包来处理 Gulp 中的命令行参数。这些软件包将命令行参数解析为更易于使用的格式,从而更轻松地在 Gulp 任务中使用它们。例如,如果您使用 yargs,则可以访问 yargs.argv
物件的属性作为命令行参数。
可以通过在标志名称前加上两个破折号来将标志从命令行传递给 Gulp 任务。例如,您可以将“production”标志传递给 Gulp 任务,如下所示:gulp build --production
。在您的 Gulp 任务中,您可以使用 process.argv
数组或 yargs 或 minimist 等软件包检查此标志是否已设置。
是的,您可以从命令行将多个参数传递给 Gulp 任务。这些参数将按传递的顺序添加到 process.argv
数组中。您可以通过对 process.argv
数组进行索引来访问 Gulp 任务中的这些参数。
可以通过访问 process.argv
数组或 yargs 或 minimist 等软件包来在 Gulp 任务中使用命令行参数。您可以使用这些参数来控制 Gulp 任务的行为。例如,您可以使用“production”标志在构建任务中压缩代码。
是的,您可以在 Gulp 任务中使用环境变量。可以通过 process.env
物件访问这些变量。如果您想将敏感信息(如 API 密钥)传递给 Gulp 任务,而无需在命令行参数中公开它们,这将非常有用。
可以使用 .on('error')
方法处理 Gulp 任务中的错误。此方法采用一个回调函数,该函数将在发生错误时被调用。在此回调函数中,您可以记录错误并结束任务以防止 Gulp 崩溃。
是的,您可以使用 gulp.series()
方法按顺序运行多个 Gulp 任务。此方法采用任务名称数组,并按定义的顺序运行它们。
是的,您可以使用 gulp.parallel()
方法并行运行多个 Gulp 任务。此方法采用任务名称数组,并同时运行所有任务。
可以使用 gulp.task()
方法将“default”作为任务名称来定义默认的 Gulp 任务。当您执行不带任何任务名称的 gulp 命令时,将运行此任务。您可以使用此任务默认运行一系列其他任务。
以上是如何将命令行参数传递到任务的详细内容。更多信息请关注PHP中文网其他相关文章!