How to Pass Command Line Parameters to Gulp Tasks-JS Tutorial-php.cn

How to Pass Command Line Parameters to Gulp Tasks

Core points

and execute them from the command line. However, it does not support passing command line parameters to tasks for use. gulpfile.js
The
Node.js returns an array containing the process, script, and all command line parameters. This array can be parsed in process.argv to create an object containing parameter values. gulpfile.js

I like Gulp.js very much, and a recent survey shows that nearly 44% of front-end developers are using Gulp tasks.

Gulp's simplicity is one of its most attractive features. You can write task functions in

: gulpfile.js

gulp.task('doSomething', () => {
  // 执行某些操作
});

Copy after login

Then use

to execute the task from the command line. Tasks can be as simple or complex as you like, and can contain further subtasks. gulp doSomething

However, it is impossible to pass command line parameters that can be used in this task, such as:

gulp doSomething --option1 "my string" --option2 123 --option3

Copy after login

(where

equals option3)true

These parameters will be passed to the Gulp application itself, not your task. Gulp does not understand these values, so they are not available in

and cannot be checked or used in your task functions. gulpfile.js

Does Gulp tasks require parameters?

It is not usually necessary - otherwise, the function of passing parameters to tasks would be added years ago! Gulp tasks are written in JavaScript, so you can set default values in your code.

You can also analyze environment variables, such as

. For example, you can check if the value is set to production or similar on the live server. This setting can then be used to determine whether to shrink the JavaScript source file while the task is running, for example: NODE_ENV

// 这是开发版本吗？
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/'));
});

Copy after login

You can now set

on Linux/Mac, or gulp js on Windows before running the export NODE_ENV=production task. It then deletes the NODE_ENV=production and console.log statements before compressing the JavaScript file. debugger

Finally, if you want the task to perform slightly different actions, you can create a new task. Tasks can be linked together to run in sequence as needed, for example:

gulp.task('doSomething', () => {
  // 执行某些操作
});

Copy after login

Run gulp doSomething1 The first task will be performed. Running gulp doSomething2 will perform both tasks in order, because doSomething1 is defined as a dependency in an optional array after the task name.

Should we consider parameters?

Avoid using parameters when there are better alternatives. Your --option1 parameter may become a valid command-line option in the next Gulp version with adverse consequences.

In other words, there are always some special circumstances...

1. Password and security

You should generally avoid hard-code credentials such as IDs and passwords into gulpfile.js. Consider the following task that uses the vinyl-ftp plugin to deploy files to the server:

gulp doSomething --option1 "my string" --option2 123 --option3

Copy after login

(Authentic, FTP is not a good way to deploy, but many developers are still using it, and it may be the only option on some hosts.)

There are several problems with this method:

FTP host, user ID, password and path are hardcoded into the file. If the code is stored in a public GitHub repository and can be viewed, cloned, and run by anyone, it can cause security issues.
Any developer can run from any device at any time gulp deploy. This is not ideal for larger teams who want to control deployment time.
If the credentials change, you must update manually gulpfile.js to ensure that the deployment task is still valid.

2. Different source, build or task locations

Gulp can be used for purposes other than typical website tasks. For example, you might have some common tasks to clear folders, create databases, transfer files, and more. Hard-coded content such as database or folder names will reduce the practicality of these tasks.

3. Complex tasks

Imagine a complex task involving dozens of plugins. If it is not practical to split it into multiple subtasks, it can become difficult to edit gulpfile.js directly to add configuration options before running the task.

You may think of more special circumstances (comments are welcome!)

How to pass parameters to your Gulp.js task

The

property in process.argvNode.js returns an array containing the process, script, and all command line parameters. For example, gulp task1 --a 123 --b "my string" --c returns the following array (values may vary depending on your operating system and settings):

// 这是开发版本吗？
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/'));
});

Copy after login

This array can be parsed in gulpfile.js. The following code creates an object named arg with parameter values:

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/'));
});

Copy after login

This function loops through the process.argv array. When it encounters a value starting with one or more dashes, it creates a new named value in the arg object, which is set to true. When it encounters a value without a dash, it sets the previous named value (if available) to the string.

When we run gulp task1 --a 123 --b "my string" --c, the arg object is set to:

gulp.task('doSomething', () => {
  // 执行某些操作
});

Copy after login

Therefore, we can check and use these values as needed.

Suppose arg is set at the top of gulpfile.js, we can rewrite our FTP deployment task so that we can pass:

User ID as --user or --u parameter
Password as --password or --p parameter

gulp doSomething --option1 "my string" --option2 123 --option3

Copy after login

Deployment only occurs when we run the task with the appropriate FTP credentials, for example:

// 这是开发版本吗？
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/'));
});

Copy after login

Summary

As we have seen, using a small amount of custom code, parameters can be passed to Gulp tasks. While your task usually does not require receiving parameters, we see that it is very useful in some cases. This is definitely a good technique you should master in your toolbox.

Parameter parsing code can be used in any Node.js command line process. However, if you need it in a non-Gulp project, the commander module provides more powerful features.

I hope you find this useful. Of course, just because you can pass parameters to Gulp tasks doesn't mean you should do so! If you come up with more good use cases for this approach, let me know in the comments.

This article was reviewed by Tim Severien. Thanks to all SitePoint peer reviewers for getting SitePoint content to its best!

Frequently Asked Questions about Passing Parameters to Gulp Tasks (FAQ)

How to pass parameters to Gulp tasks from the command line?

Arrays can be used to pass parameters to Gulp tasks from the command line. This array contains command line parameters passed when starting the Node.js process. The first two elements of this array are the path to the Node.js executable and the path to the Gulp file. Any other parameters will be added to this array starting from the third position. You can access these parameters in the Gulp task by indexing the process.argv array. process.argv

Can I use packages to handle command line parameters in Gulp?

Yes, you can use packages like yargs or minimist to handle command line parameters in Gulp. These packages parse command line parameters into easier-to-use formats, making them easier to use in Gulp tasks. For example, if you use yargs, you can access the properties of the

object as a command line parameter. yargs.argv

How to use flags in Gulp tasks?

The flag can be passed from the command line to the Gulp task by preceding the flag name. For example, you can pass the "production" flag to a Gulp task as follows:

. In your Gulp task, you can check if this flag is set using a package like gulp build --production or yargs or minimist. process.argv

Can I pass multiple parameters to a Gulp task?

Yes, you can pass multiple parameters to Gulp tasks from the command line. These parameters are added to the process.argv array in the order they are passed. You can access these parameters in the Gulp task by indexing the process.argv array.

How to use command line parameters in Gulp tasks?

Can use command line parameters in Gulp tasks by accessing process.argv arrays or packages such as yargs or minimist. You can use these parameters to control the behavior of Gulp tasks. For example, you can use the "production" flag to compress code in a build task.

Can I use environment variables in Gulp tasks?

Yes, you can use environment variables in Gulp tasks. These variables can be accessed through the process.env object. This is useful if you want to pass sensitive information such as API keys to Gulp tasks without exposing them in command line parameters.

How to deal with errors in Gulp tasks?

The .on('error') can be used to handle errors in Gulp tasks. This method takes a callback function that will be called when an error occurs. In this callback function, you can log errors and end the task to prevent Gulp from crashing.

Can I run multiple Gulp tasks in order?

Yes, you can run multiple Gulp tasks in order using the gulp.series() method. This method takes an array of task names and runs them in the defined order.

Can I run multiple Gulp tasks in parallel?

Yes, you can run multiple Gulp tasks in parallel using the gulp.parallel() method. This method takes an array of task names and runs all tasks at the same time.

How to define the default Gulp task?

The default Gulp task can be defined using the gulp.task() method using "default" as the task name. This task is run when you execute the gulp command without any task name. You can use this task to run a series of other tasks by default.

The above is the detailed content of How to Pass Command Line Parameters to Gulp Tasks. For more information, please follow other related articles on the PHP Chinese website!