[解決済み] Gulpにフラグを渡して、異なる方法でタスクを実行させることは可能ですか?
2022-03-14 02:23:49
質問
通常、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はそのためのユーティリティを提供していませんが、多くのコマンドアーグパーサーのうちの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
.
関連
-
JSアレイループと効率解析の比較
-
vue for 登録ページ効果 vue for sms 認証コードログイン
-
Vueの一般的な組み込みディレクティブの説明
-
[解決済み】React - uncaught TypeError: 未定義のプロパティ 'setState' を読み取れない
-
[解決済み】TypeError: Router.use() はミドルウェアの関数を要求しているが、Object を取得した。
-
[解決済み】JavaScript TypeError: null のプロパティ 'style' を読み取ることができない
-
[解決済み】ExpressJS - throw er Unhandled errorイベント
-
[解決済み】React Uncaught Error: 対象コンテナが DOM 要素でない [重複]。
-
JavaScriptのgetElementById()メソッド入門
-
[解決済み] Gulpのタスクを次々に実行する方法
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
JavaScriptのクロージャの説明
-
Vueのクラススタイルの使い方の詳細
-
Vueのフォームイベントのデータバインディングの説明
-
Vueのフィルタの説明
-
[解決済み】最大呼び出しスタックサイズ超過エラー
-
[解決済み】Node.js getaddrinfo ENOTFOUND
-
[解決済み】Node Version Manager のインストール - nvm コマンドが見つかりません。
-
[解決済み】ローカルファイルを開くことができません - Chrome: ローカルリソースの読み込みが許可されていない
-
[解決済み】ERROR エラーです。スイッチのname属性が指定されていないフォームコントロールの値アクセッサがない
-
[解決済み】Gulpのタスクにパラメータを渡す