3

ファイルの名前を変更し、html ファイル内のファイル参照を更新する gulp-rev lib[1] のフォークされたリポジトリを使用している javascript ファイルと css ファイルの両方があります。

残念ながら、2 つのタスク間に競合状態があり、md5 という名前のファイルへのスタイルシート参照または js ファイルのいずれかが優先されます。

タスクの同期を可能にするために、promise とコールバック (以下を参照) を使用しようとしましたが、css と js の両方の md5 参照が行われることはありません。

sindresorhusのlibはファイルの名前を変更するだけでリンクを修正しないので、htmlリンクを修正するより良い方法はありますか、それともフォークされたプラグインを使用していますか(私が欠けているいくつかの修正があります)?

gulp.task('rev', ['rev-js'] );
gulp.task('rev-js', ['rev-css'], function(cb) {
  var context = rev.Context();
  gulp.src(['./build/public/js/woddy.js', './build/public/js/angular.js', './build/public/js/components.js'])
    .pipe(rev(context))
    .pipe(gulp.dest('./build/public/js'));
  gulp.src('./build/public/app.html')
    .pipe(context.replace(/src="js\/(\w+\.js)"/g, 'src="js/{{$1}}"'))
    .pipe(gulp.dest('./build/public'));
});
gulp.task('rev-css', function() {
  var context = rev.Context();
  gulp.src('./build/public/styles/woddy.css')
    .pipe(rev(context))
    .pipe(gulp.dest('./build/public/styles'));
  gulp.src('./build/public/app.html')
    .pipe(context.replace(/href="styles\/(\w+\.css)"/g, 'href="styles/{{$1}}"'))
    .pipe(gulp.dest('./build/public'));
});
  1. https://github.com/dtinth/gulp-rev
4

1 に答える 1

5

gulp 内のほぼすべての操作は非同期です。つまり、タスクが完了したときに通知するために、サポートされている 3 つのメソッドのいずれかを使用する必要があります。(タスクが完全に同期している場合は、何もする必要はありません。)

  1. メソッドからストリームを返す (通常は最も簡単)
  2. 約束を返す (一口でまれ)
  3. タスク関数に提供されたコールバック メソッドを使用します。

まず、メソッドにコールバック引数がありますrev-js。変数 ( cb) を含めても、それを使用しないと、そのタスクは決して「完了」せず、そのタスクをrev待つことになります。

2 つ目は、各タスクに 2 つのストリーム セットがあり、これらが同時に実行されていることです。たとえば、rev-jsでは、js タスクが開始され、次に html タスクが開始され、いずれかが任意の順序で処理および完了します。ほとんどの場合、すべての JS ファイルが処理される前に HTML タスクが完了します。

個人的には、HTML タスクを分割し、既存のプラグインの 1 つ (簡単なgulp-injectなど) を使用して、それを個別に処理します。

したがって、その場合、ファイルは次のようになります

gulp.task('rev', ['rev-html'] );

gulp.task('rev-html', ['rev-js', 'rev-css'], function() {
  // change to reference specific JS and CSS files as necessary
  return gulp.src(['./build/public/**/*.*', '!./build/public/index.html'])
    .pipe(inject('index.html'))
    .pipe(gulp.dest('./build/public'));
});

gulp.task('rev-js', function() { // NOTE: no `cb` here
  var context = rev.Context();
  return gulp.src(['./build/public/js/woddy.js', './build/public/js/angular.js', './build/public/js/components.js'])
    .pipe(rev(context))
    .pipe(gulp.dest('./build/public/js'));
});
gulp.task('rev-css', function() {
  var context = rev.Context();
  return gulp.src('./build/public/styles/woddy.css')
    .pipe(rev(context))
    .pipe(gulp.dest('./build/public/styles'));
});

インジェクションを手動で処理したい場合は、ストリーム コンバイナーを使用して、そのストリームの結果を返す必要があります。ただし、HTML ステップの前に JS ステップを完了する必要があります。

于 2014-01-23T04:21:11.673 に答える