通常我们可以通过gulp mytask之类的东西从控制台运行gulp任务。我是否可以将参数传递给gulp任务?如果可能,请举例说明如何做到这一点。


当前回答

这是节目不可或缺的特色。你可以试试码。

npm install --save-dev yargs

你可以这样使用它:

gulp mytask --production --test 1234

在代码中,例如:

var argv = require('yargs').argv;
var isProduction = (argv.production === undefined) ? false : true;

供您理解:

> gulp watch
console.log(argv.production === undefined);  <-- true
console.log(argv.test === undefined);        <-- true

> gulp watch --production
console.log(argv.production === undefined);  <-- false
console.log(argv.production);                <-- true
console.log(argv.test === undefined);        <-- true
console.log(argv.test);                      <-- undefined

> gulp watch --production --test 1234
console.log(argv.production === undefined);  <-- false
console.log(argv.production);                <-- true
console.log(argv.test === undefined);        <-- false
console.log(argv.test);                      <-- 1234

希望你能接手。

还有一个你可以使用的插件,极简主义。还有另一篇文章,为yargs和minimist提供了很好的例子:(有没有可能将一个标志传递给Gulp,让它以不同的方式运行任务?)

其他回答

这是节目不可或缺的特色。你可以试试码。

npm install --save-dev yargs

你可以这样使用它:

gulp mytask --production --test 1234

在代码中,例如:

var argv = require('yargs').argv;
var isProduction = (argv.production === undefined) ? false : true;

供您理解:

> gulp watch
console.log(argv.production === undefined);  <-- true
console.log(argv.test === undefined);        <-- true

> gulp watch --production
console.log(argv.production === undefined);  <-- false
console.log(argv.production);                <-- true
console.log(argv.test === undefined);        <-- true
console.log(argv.test);                      <-- undefined

> gulp watch --production --test 1234
console.log(argv.production === undefined);  <-- false
console.log(argv.production);                <-- true
console.log(argv.test === undefined);        <-- false
console.log(argv.test);                      <-- 1234

希望你能接手。

还有一个你可以使用的插件,极简主义。还有另一篇文章,为yargs和minimist提供了很好的例子:(有没有可能将一个标志传递给Gulp,让它以不同的方式运行任务?)

@Ethan的答案完全可行。根据我的经验,更多节点的方法是使用环境变量。这是配置部署在托管平台(例如Heroku或Dokku)上的程序的标准方法。

要从命令行传递参数,可以这样做:

发展: 吞咽dev

生产: NODE_ENV=production gulp dev

语法不同,但非常Unix,并且它与Heroku, Dokku等兼容。

您可以在process.env.NODE_ENV的代码中访问该变量

MYAPP=something_else gulp开发

process.env.MYAPP === 'something_else'

这个答案可能会给你一些其他的想法。

如果你想避免增加额外的依赖,我找到了node的进程。Argv变得有用:

gulp.task('mytask', function() {
    console.log(process.argv);
});

下面是:

gulp mytask --option 123

应该显示:

[ 'node', 'path/to/gulp.js', 'mytask', '--option', '123']

如果确定所需的参数位于正确的位置,则不需要标记。**在这种情况下使用:

var option = process.argv[4]; //set to '123'

但是:由于选项可能没有设置,或者可能处于不同的位置,我觉得更好的想法是这样的:

var option, i = process.argv.indexOf("--option");
if(i>-1) {
    option = process.argv[i+1];
}

这样,你就可以处理多种选项的变化,比如:

//task should still find 'option' variable in all cases
gulp mytask --newoption somestuff --option 123
gulp mytask --option 123 --newoption somestuff
gulp mytask --flag --option 123

**编辑:对于节点脚本为true,但是gulp将任何没有开头“——”的内容解释为另一个任务名称。所以使用gulp mytask 123会失败,因为gulp找不到名为“123”的任务。

下面是另一种不需要额外模块的方法:

我需要从任务名称中猜测环境,我有一个“开发”任务和一个“prod”任务。

当我运行gulp prod时,它应该设置为prod环境。 当我运行gulp dev或其他任何东西时,它应该设置为开发环境。

为此,我只检查正在运行的任务名称:

devEnv = process.argv[process.argv.length-1] !== 'prod';

下面是我如何使用它的示例。对于css/less任务。可适用于所有。

var cssTask = function (options) {
  var minifyCSS = require('gulp-minify-css'),
    less = require('gulp-less'),
    src = cssDependencies;

  src.push(codePath + '**/*.less');

  var run = function () {
    var start = Date.now();

    console.log('Start building CSS/LESS bundle');

    gulp.src(src)
      .pipe(gulpif(options.devBuild, plumber({
        errorHandler: onError
      })))
      .pipe(concat('main.css'))
      .pipe(less())
      .pipe(gulpif(options.minify, minifyCSS()))
      .pipe(gulp.dest(buildPath + 'css'))
      .pipe(gulpif(options.devBuild, browserSync.reload({stream:true})))
      .pipe(notify(function () {
        console.log('END CSS/LESS built in ' + (Date.now() - start) + 'ms');
      }));
  };

  run();

  if (options.watch) {
    gulp.watch(src, run);
  }
};

gulp.task('dev', function () {
  var options = {
    devBuild: true,
    minify: false,
    watch: false
  };

  cssTask (options);
});