Edited at

gulp(npm)に引数を渡したい!

More than 3 years have passed since last update.

ファイルを指定して、gulpを実行したい! 」となったので、

gulpでファイル名を引数でわたせばいいんじゃないの?と思い、対応していったんですがその時のメモです。


gulpに引数を渡す

基本的に引数は渡せなそうだったので、

minimistを使用することにしました。

こちらは、引数をオブジェクトとして渡してくれる機能になります。


minimistの使い方


gulpfile.js

var gulp = require('gulp'),

minimist = require('minimist');
var argv = minimist(process.argv.slice(2));
gulp.task('check', function() {
console.dir(argv);
});


確認方法


gulp

$ gulp check -f HOGE


これで引数を受け取ることができました。


npm run script に引数を渡す

npmは標準で「--」の後ろに引数を渡せます

https://docs.npmjs.com/cli/run-script

こちらを参考に、以下のように修正して $ npm run します。


package.json

// 省略

"scripts": {
"check": "bundle exec gulp check -f"
},
// 省略


gulpfile.js

var gulp = require('gulp'),

minimist = require('minimist');
var argv = minimist(process.argv.slice(2));
gulp.task('check', function() {
console.dir(argv);
});

$ npm run check -- HOGE // 「HOGE」を渡します

[19:15:10] Starting 'check'...
{ _: [ 'check' ], f: 'HOGE' }
[19:15:10] Finished 'check' after 2.27 ms

fにHOGEが入っているのは、

package.jsonのscriptsにあるcheck箇所に固定で

"bundle exec gulp check -f"

と記述してあるからです。


応用

$ npm run check -- target$ gulp check -f target

を実行したいので下記のように編集していきます。


gulpfile.js

var gulp = require('gulp'),

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

gulp.task('check', function() {
// argv['f']の値がないときはboolean型のtrueを返すので文字列(引数があったら)だったら処理をすすめるようにします。
if(argv['f'] === true) {
console.log('$ npm run watch -- [filename] // 拡張子無し');
process.exit(0);
}
gulp.watch(['sass/' + argv['f'] + '.scss'], ['sass']);
});
// sassタスクは別途書く


$ npm run check -- style // style.scssを、sassタスク実行します。

これで引数に渡した値によって、タスク内で処理する対象や処理を変更することができました!