0

Gulp 4.0 では一連のタスクを連続して実行しようとしていますが、3 番目のタスクを追加すると、gulp コードが壊れます。

    gulp.task('concat-js', (done) => {
      gulp.src([  
        'app1.js',
        'app2.js',
      ])
      .pipe(concat("app.js")) 
      .pipe(gulp.dest('build'))
      done();
    });

    gulp.task('concat-css', (done) => {
      gulp.src([
        '.styles1.css',
        '.style2.css'
      ])
      .pipe(concat("app.css"))
      .pipe(gulp.dest('build'))
      done();  
    });

    gulp.task('minify-js', (done) => {
      gulp.src('./build/app.js')
      .pipe(uglify())
      .pipe(gulp.dest('./build/'))
      done();
    })

    //this works & creates /build with the app.js & app.css files
    gulp.task('build-production-static-resource', gulp.series('concat-js', 'concat-css',, (done) => {
      done();
    }));

ビルド フォルダーを削除して最初からやり直し、別のタスク (minfy-js) を追加しようとすると、3 番目のタスクが失敗し、ビルド フォルダーも作成されません。

    //File not found with singular glob: /Users/user/myapp/build/app.js
    gulp.task('build-production-static-resource', gulp.series('concat-js', 'concat-css', 'minify-js', (done) => {
      done();
    }));
4

1 に答える 1

4

タスクの非同期完了を通知する方法が間違っています。gulp で非同期完了を通知できるさまざまな方法の概要については、この回答をお読みください。

基本的に、作成するすべてのストリームgulp.src()は非同期です。つまり、ストリームを作成すると、コードがすぐに返されます。ただし、ストリームの実際の処理は、タスク関数を終了した後にのみ開始されます。ストリームを使用していること、およびストリームの処理が完了するまで待機する必要があることを gulp が認識できるようにするにはreturn、タスクからストリームを取得する必要があります。

あなたはまったく別のことをしています。done非同期タスクの完了を gulp に通知する別の方法であるコールバック関数を呼び出しています。ただし、この場合は完全に間違った方法です。コールバック関数を呼び出したときに、done作成したストリームの処理が開始されていないためです。

つまり、gulp はconcat-jsタスクが終了したと見なしますが、タスク内のコードは実際には実行を開始していません。minify-jsそのため、タスクが実行されるとき、./build/app.jsファイルはまだ作成されていません。ブーム。エラー。

これを常にreturnタスクからのストリームで修正するには:

gulp.task('concat-js', () => {
  return gulp.src([  
      'app1.js',
      'app2.js',
    ])
    .pipe(concat("app.js")) 
    .pipe(gulp.dest('build'))
});

gulp.task('concat-css', () => {
  return gulp.src([
      '.styles1.css',
      '.style2.css'
    ])
    .pipe(concat("app.css"))
    .pipe(gulp.dest('build'))
});

gulp.task('minify-js', () => {
  return gulp.src('./build/app.js')
    .pipe(uglify())
    .pipe(gulp.dest('./build/'))
})

gulp.task('build-production-static-resource', gulp.series(
  'concat-js', 'concat-css', 'minify-js'
));
于 2016-07-27T19:33:13.993 に答える