通常、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));
});
Gulpはそのためにいかなる種類のutilも提供していませんが、多くのコマンド引数パーサーのうちの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
と組み合わせて、条件付きでストリームをパイプ処理することもできます。これは、devとprodの構築に非常に便利です。
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
で呼び出してください。
編集
gulp-util
は 非推奨 であり、避けるべきですので、代わりに minimist を使用することをお勧めします。これはすでに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
そして私のスタイルタスクもうまくいきます。
チャオラルフ
これが私が見つけた簡単なレシピです:
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'));
});
gulp scripts --env production
オリジナルのRef(もう利用できません): 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
// 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'));
});
gulp scripts --env production
引数を解析せずに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
を実行するとNice htmlが生成され、gulp production build
では縮小されます。
厳密な(順序付き!)引数がある場合は、process.argv
を確認することで簡単に取得できます。
var args = process.argv.slice(2);
if (args[0] === "--env" && args[1] === "production");
実行してください:gulp --env production
...しかし、これは tooo strictであり、防弾ではないと思います。それで、私はちょっといじって...そしてこの効用関数で終わった:
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
コマンドラインからタスクコールバックにパラメータを注入するプラグインを作成しました。
gulp.task('mytask', function (production) {
console.log(production); // => true
});
// gulp mytask --production
https://github.com/stoeffel/gulp-param
誰かがバグを見つけた場合、またはそれに改善があった場合は、PRをマージできます。
そして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
の下で引数をgulpに渡します。
npm run build.dev -- --debug
// 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
var isProduction = (process.argv.indexOf("production")>-1);
CLIのgulp production
は、私のプロダクションタスクを呼び出し、すべての条件付きのフラグを立てます。
異なる環境用に異なる設定ファイル( production 、 dev 、および testing 用)を渡したいと思いました。これは、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);
}
そしてそれを実行するためにgulp --env=testing
この質問が投稿されてからしばらく時間が経ちましたが、おそらく誰かに役立つでしょう。
私は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