web-dev-qa-db-ja.com

gulpタスクがすべてのファイルで完了した後にコードを実行する

だから私はGulpをスピードに関してGruntと比較する方法を試してみましたが、その結果にはかなり感銘を受けましたが、Gulpでのやり方がわからないことがあります。

だから私は、HTMLを縮小するためにこの一口タスクを持っています：

gulp.task('html-minify', function() {
  var files = [
    relativePaths.webPath + '/*.html',
    relativePaths.webPath + '/components/**/*.html',
    relativePaths.webPath + '/' + relativePaths.appPath + '/components/**/*.html'
  ];

  var changedFiles = buildMetaData.getChangedFiles(files);

  //TODO: needs to execute only after successful run of the task
  buildMetaData.addBuildMetaDataFiles(changedFiles);
  buildMetaData.writeFile();
  return gulp.src(changedFiles, {
      base: relativePaths.webPath
    })
    .pipe(filelog())
    .pipe(minifyHtml({
      empty: true,
      quotes: true,
      conditionals: true,
      comments: true
    }))
    .pipe(gulp.dest(relativePaths.webPath + '/' + relativePaths.appPath +  '/' + relativePaths.buildPath));
});

BuildMetaDataオブジェクトには必要なカスタム機能があり、gulp-changedのようなプラグインを使用できない理由があります。私が理解しようとしているのは、ミニファイがすべてのファイルを処理し、正常に実行された後にコードのブロックを実行する方法（可能な場合）です。 gulpでこのようなことは可能ですか？

node.jsbuildgulp
34
ryanzec

html-minifyに依存するタスクを作成できます。

gulp.task('other-task', ['html-minify'], function() {
  //stuff
});

html-minifyタスク内のストリームendイベントをリッスンすることもできます。

gulp.task('html-minify', function(done) {
  var files = [
    relativePaths.webPath + '/*.html',
    relativePaths.webPath + '/components/**/*.html',
    relativePaths.webPath + '/' + relativePaths.appPath + '/components/**/*.html'
  ];

  var changedFiles = buildMetaData.getChangedFiles(files);

  //TODO: needs to execute only after successful run of the task
  buildMetaData.addBuildMetaDataFiles(changedFiles);
  buildMetaData.writeFile();
  var stream = gulp.src(changedFiles, {
      base: relativePaths.webPath
    })
    .pipe(filelog())
    .pipe(minifyHtml({
      empty: true,
      quotes: true,
      conditionals: true,
      comments: true
    }))
    .pipe(gulp.dest(relativePaths.webPath + '/' + relativePaths.appPath +  '/' + relativePaths.buildPath));

  stream.on('end', function() {
    //run some code here
    done();
  });
  stream.on('error', function(err) {
    done(err);
  });
});
67
Ben

event-stream を使用して2つのストリームをマージすることもできます。この例では、コマンドラインから yargs を使用して入力を取得し、構成を構築してから2つをマージします。

var enviroment = argv.env || 'development';
gulp('build', function () {
    var config = gulp.src('config/' + enviroment + '.json')
      .on('end', function() { gutil.log(warn('Configured ' + enviroment + ' enviroment.')); })
      .pipe(ngConstant({name: 'app.config'}));
    var scripts = gulp.src('js/*');
    return es.merge(config, scripts)
      .pipe(concat('app.js'))
      .pipe(gulp.dest('app/dist'))
      .on('error', function() { });
  });

タスクの前の標準と同様に、前のタスクが完了するのを待つこともできます。これは、引数をbeforeタスクに渡す必要がある場合に便利です（gulpは現在サポートしていません）：

var tasks = {
  before: function(arg){
    // do stuff
  },
  build: function() { 
    tasks.before(arg).on('end', function(){ console.log('do stuff') });
  }
};

gulp('build', tasks.build);
3
Rimian

GULP V3

依存関係タスクの使用：

gulp.task('qr-task', ['md-task', 'js-task'], function() {
  gulp.src(src + '/*.qr')
    .pipe(plugin())
    .pipe(gulp.dest(dist));
});

メインタスクはすべての依存タスクの後に開始されますが、それらは（依存タスク）は並行して実行されますが（すべて同時に）、したがって、タスクは順番に開始/終了します（mdとjsはqrの前に並行して実行されます）。

複数のタスクの正確な順序が必要で、それらを分割したくない場合は、async＆awaitを使用してこれを実現できます。

function Async(p) {
   return new Promise((res, rej) => p.on('error', err => rej(err)).on('end', () => res()));
}

gulp.task('task', async () => {

  await Async(gulp.src(src + '/*.md')
      .pipe(plugin())
      .pipe(gulp.dest(dist)));

  await Async(gulp.src(src + '/*.js')
      .pipe(plugin())
      .pipe(gulp.dest(dist)));

  await Async(gulp.src(src + '/*.qr')
      .pipe(plugin())
      .pipe(gulp.dest(dist)));
});

GULP V4

gulp 4では、古い依存パターンが削除され、このエラーが発生します。

AssertionError [ERR_ASSERTION]: Task function must be specified

代わりに、gulp.parallelとgulp.seriesを使用する必要があります（タスクを正しく実行できます）。

gulp.task('qr-task', gulp.series('md-task', 'js-task', function(done) {
  gulp.src(src + '/*.qr')
    .pipe(plugin())
    .pipe(gulp.dest(dist));
  done();
}));

詳細については、 https://github.com/gulpjs/gulp/blob/4.0/docs/API.md をご覧ください。

1
Ali