フラグをGulpに渡して、さまざまな方法でタスクを実行させることは可能ですか?


369

通常、Gulpのタスクは次のようになります。

gulp.task('my-task', function() {
    return gulp.src(options.SCSS_SOURCE)
        .pipe(sass({style:'nested'}))
        .pipe(autoprefixer('last 10 version'))
        .pipe(concat('style.css'))
        .pipe(gulp.dest(options.SCSS_DEST));
});

コマンドラインフラグをgulp(タスクではありません)に渡して、それに基づいて条件付きでタスクを実行させることは可能ですか?例えば

$ gulp my-task -a 1

そして、私のgulpfile.jsで:

gulp.task('my-task', function() {
        if (a == 1) {
            var source = options.SCSS_SOURCE;
        } else {
            var source = options.OTHER_SOURCE;
        }
        return gulp.src(source)
            .pipe(sass({style:'nested'}))
            .pipe(autoprefixer('last 10 version'))
            .pipe(concat('style.css'))
            .pipe(gulp.dest(options.SCSS_DEST));
});

11
ノードで実行しているので、おそらくprocess.argvコマンドライン引数にアクセスするために使用できます。
zzzzBov 2014

回答:


528

Gulpはそのためのユーティリティを一切提供していませんが、多くのコマンド引数パーサーの1つを使用できます。好きyargsです。する必要があります:

var argv = require('yargs').argv;

gulp.task('my-task', function() {
    return gulp.src(argv.a == 1 ? options.SCSS_SOURCE : options.OTHER_SOURCE)
        .pipe(sass({style:'nested'}))
        .pipe(autoprefixer('last 10 version'))
        .pipe(concat('style.css'))
        .pipe(gulp.dest(options.SCSS_DEST));
});

また、これを組み合わせてgulp-ifストリームを条件付きでパイプすることもできます。これは、開発と製品の構築に非常に役立ちます。

var argv = require('yargs').argv,
    gulpif = require('gulp-if'),
    rename = require('gulp-rename'),
    uglify = require('gulp-uglify');

gulp.task('my-js-task', function() {
  gulp.src('src/**/*.js')
    .pipe(concat('out.js'))
    .pipe(gulpif(argv.production, uglify()))
    .pipe(gulpif(argv.production, rename({suffix: '.min'})))
    .pipe(gulp.dest('dist/'));
});

gulp my-js-taskまたはまたはで呼び出しますgulp my-js-task --production


45
これはどういうわけか@公式gulp github、重要なものに言及する必要があります!
最大

2
これは、yargsなしでこれを実現する方法を説明するビデオです:youtube.com/watch
v

9
こんにちは@plankguy、ビデオはとてもいいです。ありがとう。libなしで手動で環境変数を解析する方法を示します。小さな違いは、ビデオは環境変数に関するものですが、上記の例はコマンドライン引数に関するものですが、Yargsは変数の解析を抽象化することで消費を簡素化するのに役立つ別のツールです。
Caio Cunha 2014年

12
使用する場合は、のように使用npm run gulpする必要がありますnpm run gulp -- --production
ivkremer 2015

3
これは公式gulp github(文字通り)で言及されています。
fracz 2016年

101

編集する

gulp-util非推奨であり、回避する必要があるため、すでに使用されている代わりにミニミストを使用することをお勧めしますgulp-util

だから私は私のgulpfileのいくつかの行を削除するように変更しましたgulp-util

var argv = require('minimist')(process.argv.slice(2));

gulp.task('styles', function() {
  return gulp.src(['src/styles/' + (argv.theme || 'main') + '.scss'])
    
});

元の

私のプロジェクトでは、次のフラグを使用します。

gulp styles --theme literature

Gulpはそのためのオブジェクトgulp.envを提供します。新しいバージョンでは非推奨であるため、gulp-utilを使用する必要があります。タスクは次のようになります。

var util = require('gulp-util');

gulp.task('styles', function() {
  return gulp.src(['src/styles/' + (util.env.theme ? util.env.theme : 'main') + '.scss'])
    .pipe(compass({
        config_file: './config.rb',
        sass   : 'src/styles',
        css    : 'dist/styles',
        style  : 'expanded'

    }))
    .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'ff 17', 'opera 12.1', 'ios 6', 'android 4'))
    .pipe(livereload(server))
    .pipe(gulp.dest('dist/styles'))
    .pipe(notify({ message: 'Styles task complete' }));
});

環境設定は、すべてのサブタスクで使用できます。したがって、このフラグを監視タスクでも使用できます。

gulp watch --theme literature

そして、私のスタイルタスクも機能します。

チャオ・ラルフ


6
gulp.env実行時にコンソールログメッセージで確認できるように、は非推奨になっています。彼らはあなたにあなた自身のパーサーを使って、yargsまたはを提案するように頼みますminimist
Caio Cunha 2014

2
ヒントをありがとう@CaioToOn 私も私の回答とプロジェクトを更新しました;)
RWAM

4
あなたは短縮することができますutil.env.theme ? util.env.theme : 'main'util.env.theme || 'main'。とにかく+1。
レナン

9
gulp-utilminimistコマンドライン引数の解析にライブラリを利用します。したがって、を使用している場合gulp-util、その目的で追加のライブラリは必要ありません。ドキュメント:github.com/substack/minimist
Rockallite 2015

57

ここに私が見つけた簡単なレシピがあります:

gulpfile.js

var gulp   = require('gulp');

// npm install gulp yargs gulp-if gulp-uglify
var args   = require('yargs').argv;
var gulpif = require('gulp-if');
var uglify = require('gulp-uglify');

var isProduction = args.env === 'production';

gulp.task('scripts', function() {
  return gulp.src('**/*.js')
    .pipe(gulpif(isProduction, uglify())) // only minify if production
    .pipe(gulp.dest('dist'));
});

CLI

gulp scripts --env production

元の参照(利用できなくなりました):https : //github.com/gulpjs/gulp/blob/master/docs/recipes/pass-params-from-cli.md

ミニミストによる代替

更新された参照から:https : //github.com/gulpjs/gulp/blob/master/docs/recipes/pass-arguments-from-cli.md

gulpfile.js

// npm install --save-dev gulp gulp-if gulp-uglify minimist

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

var minimist = require('minimist');

var knownOptions = {
  string: 'env',
  default: { env: process.env.NODE_ENV || 'production' }
};

var options = minimist(process.argv.slice(2), knownOptions);

gulp.task('scripts', function() {
  return gulp.src('**/*.js')
    .pipe(gulpif(options.env === 'production', uglify())) // only minify if production
    .pipe(gulp.dest('dist'));
});

CLI

gulp scripts --env production

2
そのレシピのリンクはもうなくなっているようです。代わりにminimistパッケージを使用する別のパッケージがあります:pass-arguments-from-cli.mdgulp自体がミニミストを使用しているので、それは理にかなっています。
yuvilio 2014年

39

on/off引数を解析せずにフラグを実行する非常に簡単な方法があります。gulpfile.js他のように実行される単なるファイルなので、次のことができます。

var flags = {
  production: false
};

gulp.task('production', function () {
  flags.production = true;
});

そしてgulp-if、ステップを条件付きで実行するようなものを使用します

gulp.task('build', function () {
  gulp.src('*.html')
    .pipe(gulp_if(flags.production, minify_html()))
    .pipe(gulp.dest('build/'));
});

実行gulp buildすると素敵なHTMLが生成されますが、gulp production build縮小されます。


2
素晴らしいアイデア、yargsを使用して保存することで、変数を設定する「プリプロダクション」タスクを実行することでこれを拡張し、「プロダクション」が['build'、 'pre-production']の依存配列を持ちます。そうすれば、「gulp production」を実行できます。
キーガン82

いいね!ストリームを設定する前にこれを使用していますgulp.task('mytask', function() { if (flags.myflag ) { flaggedtask } else { unflaggedask } });
ヘンリー

私はこれが
大した

@ Keegan'shairstyle82同様のことを行いましたが、のプロパティを設定するときに競合状態が発生しないように実行シーケンスを利用する必要がありましたflags
CalMlynarczyk 2016年

3
この方法の欠点は、ターミナルでgulpコマンドに引数を渡すだけでなく、フラグ変数を変更するたびにgulpfile.jsを変更する必要があることです。
jbyrd

33

厳密な(順序付けられた)引数がある場合は、をチェックするだけで取得できますprocess.argv

var args = process.argv.slice(2);

if (args[0] === "--env" && args[1] === "production");

それを実行します: gulp --env production

...しかし、これは 厳格すぎて防弾ではない!だから、私は少しいじった...そしてこのユーティリティ関数で終わった:

function getArg(key) {
  var index = process.argv.indexOf(key);
  var next = process.argv[index + 1];
  return (index < 0) ? null : (!next || next[0] === "-") ? true : next;
}

引数名を食べ、これをで検索しprocess.argvます。何も見つからなかった場合は、吐き出しnullます。それ以外の場合、次の引数がないか、次の引数がコマンドであり、値(ダッシュで異なる)でtrueはない場合は、返されます。(それはキーが存在するためですが、値はありません)。以前のすべてのケースが失敗する場合は、次の引数値が取得されます。

> gulp watch --foo --bar 1337 -boom "Foo isn't equal to bar."

getArg("--foo") // => true
getArg("--bar") // => "1337"
getArg("-boom") // => "Foo isn't equal to bar."
getArg("--404") // => null

さて、今のところ十分です... gulpを使用した簡単な例を次に示します。

var gulp = require("gulp");
var sass = require("gulp-sass");
var rename = require("gulp-rename");

var env = getArg("--env");

gulp.task("styles", function () {
  return gulp.src("./index.scss")
  .pipe(sass({
    style: env === "production" ? "compressed" : "nested"
  }))
  .pipe(rename({
    extname: env === "production" ? ".min.css" : ".css"
  }))
  .pipe(gulp.dest("./build"));
});

それを実行します gulp --env production


引数名の前にはダッシュ(if (args[0] === '--env' && args[1] === 'production');
:)を

@yckart-コード例では、おそらくgetArgのrequire( '..')を追加する必要があります。
jbyrd 2016年

7

コマンドラインからタスクコールバックにパラメーターを挿入するプラグインを作成しました。

gulp.task('mytask', function (production) {
  console.log(production); // => true
});

// gulp mytask --production

https://github.com/stoeffel/gulp-param

誰かがバグを発見したり、バグを改善したりした場合は、PRを統合させていただきます。


4

そして、typescript(gulpfile.ts)を使用している場合は、これをyargs(@Caio Cunhaの優れた回答に基づいて構築してください)https://stackoverflow.com/a/23038290/1019307および上記の他のコメント):

インストール

npm install --save-dev yargs

typings install dt~yargs --global --save

.ts ファイル

これを.tsファイルに追加します。

import { argv } from 'yargs';

...

  let debug: boolean = argv.debug;

これは、各.tsファイルで個別に行う必要があります(にtools/tasks/projectインポートされるファイルも含むgulpfile.ts/js)。

走る

gulp build.dev --debug

またはnpm、argpをgulpに渡します。

npm run build.dev -- --debug

2

コマンドラインから引数を渡す

// npm install --save-dev gulp gulp-if gulp-uglify minimist

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

var minimist = require('minimist');

var knownOptions = {
  string: 'env',
  default: { env: process.env.NODE_ENV || 'production' }
};

var options = minimist(process.argv.slice(2), knownOptions);

gulp.task('scripts', function() {
  return gulp.src('**/*.js')
    .pipe(gulpif(options.env === 'production', uglify())) // only minify in production
    .pipe(gulp.dest('dist'));
});

次にgulpを実行します:

$ gulp scripts --env development

ソース


2
var isProduction = (process.argv.indexOf("production")>-1);

CLI gulp productionは私の実稼働タスクを呼び出し、条件付きのフラグを設定します。


1

以下のための1 -私たちは、異なる環境ごとに異なる設定ファイル渡したい生産DEVおよびテストを。これはgulpファイル内のコードです:

//passing in flag to gulp to set environment
//var env = gutil.env.env;

if (typeof gutil.env.env === 'string') {
  process.env.NODE_ENV = gutil.env.env;
}

これはapp.jsファイル内のコードです。

  if(env === 'testing'){
      var Config = require('./config.testing.js');
      var Api = require('./api/testing.js')(Config.web);
    }
    else if(env === 'dev'){
       Config = require('./config.dev.js');
        Api = require('./api/dev.js').Api;
    }
    else{
       Config = require('./config.production.js');
       Api = require('./api/production.js')(Config.web);
    }

そしてそれを実行する --env=testing


1

この質問が投稿されてからしばらく経ちましたが、多分それは誰かを助けるでしょう。

私はGULP CLI 2.0.1(グローバルにインストール)とGULP 4.0.0(ローカルにインストール)を使用しています。ここでは、追加のプラグインなしでそれを行う方法を示します。コードは自明だと思います。

var cp = require('child_process'), 
{ src, dest, series, parallel, watch } = require('gulp');

// == availableTasks: log available tasks to console
function availableTasks(done) {
  var command = 'gulp --tasks-simple';
  if (process.argv.indexOf('--verbose') > -1) {
    command = 'gulp --tasks';
  }
  cp.exec(command, function(err, stdout, stderr) {
    done(console.log('Available tasks are:\n' + stdout));
  });
}
availableTasks.displayName = 'tasks';
availableTasks.description = 'Log available tasks to console as plain text list.';
availableTasks.flags = {
  '--verbose': 'Display tasks dependency tree instead of plain text list.'
};
exports.availableTasks = availableTasks;

そしてコンソールから実行します:

gulp availableTasks

次に、実行して違いを確認します。

gulp availableTasks --verbose
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.