最近またプロジェクトをする時、いくつかのカスタマイズ化の需要に出会って、需要は比較的に簡単ですが、しかしやはりここで記録します.
需要

コマンドライン方式によるカスタマイズパッケージ

プロジェクトとプロジェクト間のカスタマイズの需要は完全に一致せず、

を区別する必要がある.

プロジェクトごとに1セットのプロファイルを読み取り、プロファイルのカスタマイズ要件

をそれぞれ読み出す.
なぜgulpを選んだのか
まず、このプロジェクトはionic 1ベースの古いプロジェクトであり、gulp(--11ハハハ)がデフォルトで統合されているためですが、主にgulpはストリームベースの自動化構築ツールであり、使いやすく、健全なプラグインメカニズムがあり、現在のニーズに完全に適用されています.
gulpの使用
gulpの基本的な使用はここでは後述しないが,理解する必要がある学生はこのリンクをクリックして学習する.
本題に入る
gulpには健全なプラグインシステムがあると述べましたが、私たちはこれらのプラグインを通じて需要を実現しています.プラグインはnpm installを通じてプラグインをインストールします.

yargs(処理コマンドライン参照)

var args = require('yargs').argv;  //argv          
var env = args.env || 'default';
  gulp xxx --env=xxx |  gulp xxx --env xxx     args.env = xxx

gulp-sequence gulpタスクのデフォルトの実行方法は並列実行であり、すべてのtaskが同時に実行されます.しかし、一部の特定の需要では、不確実性が発生します.タスクをシリアルで実行したい場合、すなわち、タスクが完了した後に次のタスクを実行する場合はgulp-sequenceを使用する必要があります.

var gulpSequence = require('gulp-sequence');
gulp.task('build', function (callback) {
    gulpSequence(
      'clean',
      'copy',
      ['task1', 'task2', 'task3'],
      function () {
        console.log('success');
      });
});

clean,copy,['task 1','task 2','task 3']の3つのタスクは順番に実行され、['task 1','task 2','task 3']のタスクは並列に実行されます.
注意:cleanの実行が完了した後にcopyを実行し、copyが完了した後に['task 1','task 2','task 3']を実行する順序が望ましいため、return gulp.src().pipe()...、gulp.task('task 1',function(done){...}などの各taskはstreamを返さなければならない.これにより、タスクが順番に実行されることを保証できます.上記の要件を満たしていない場合、タスクはシリアル実行ですが、次のタスクが完了するまで待機しません.
yargsとgulpSequenceを組み合わせることで、前の2つのニーズを解決できます.

var args = require('yargs').argv;
var gulpSequence = require('gulp-sequence');

var defaultTask = ['task1', 'task2', 'task3'];
var xxxTask = ['task4', 'task5', 'task6'];

gulp.task('build', function (callback) {
    gulpSequence(
      'clean',
      'copy',
      eval(args.env || 'default' + 'Task'),
      function () {
        console.log('success');
      });
});

各カスタマイズのニーズを抽出し,gulp build --env xxxパラメータの違いにより,それぞれ対応するタスクを実行する.

fs,gulp-template,gulp-replace fsプラグインプロファイルを読み込むための

var fs = require('fs');
var config = JSON.parse(fs.readFileSync('config.json', 'utf8'));

読み込んだデータをgulp-templateでhtmlに置き換える

test.html
Hello 

var template = require('gulp-template');
gulp.task('task1', () =>
    gulp.src('src/test.html')
        .pipe(template({name: config.name}))
        .pipe(gulp.dest('dist'))
);

gulp-replaceはgulp-templateと似ています.詳細はクリックしてください.

merge-stream gulp-template,gulp-replaceを使用すると、task処理ロジックが同じになることがありますが、srcとdestが異なる場合、繰り返し定義タスクが煩雑すぎて、merge-streamを使用する必要があります.

merge-streamは使用されていません

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

gulp.task('task1', () =>
    gulp.src('src/test-1.html')
        .pipe(template({name: config.name}))
        .pipe(gulp.dest('dist/test-1.html''))

gulp.task('task2', () =>
    gulp.src('src/test-2.html')
        .pipe(template({name: config.name}))
        .pipe(gulp.dest('dist/test-2.html''))

merge-streamの使用

var merge = require('merge-stream');

function html (src, dest) {
  return gulp.src(src)
            .pipe(template({name: config.name}))
            .pipe(gulp.dest(dest));
  }
}

gulp.task('template', function () {
    var stream1 = html('src/test-1.html', 'dest/test-1.html');
    var stream2 = html('src/test-2.html', 'dest/test-2.html');
    return merge(stream1, stream2)
})

以上のいくつかの簡単なプラグインにより、簡単なカスタマイズのニーズを実現することができます.
まとめ
gulpというフロントエンド自動構築ツールは,重複操作を大幅に低減し,複雑な問題を簡単化し,開発効率を向上させることができる.この文章もいくつかのプラグインが簡単に結合して使用されているだけで、より多くの機能は掘り起こし続ける必要があります.