Gulpの依存関係のタスク

Question

現在、5つのタスクを間接的に実行するVS 2015アップデート3で複合タスク "compile：spa"を実行する際に問題が発生しています。私はminificationタスク「minify：css」と「minify：js」に問題を絞り込んだ。しかし、私が個々にタスクを実行すると、期待どおりに動作し、2回目に "compile：spa"を再実行すると動作します。

"bundle：css"と "bundle：js"は、 "minification：css"と "bundle：js"が要求を処理する前にファイルの書き込みを同期していないという事実と関係していると思いますその後何もファイルを見つけることができません。

"bunde：css"と "minify：css"のすべてのコードを1つのタスクに統合しようとしましたが、期待通りに機能しません。私はそれぞれの関数内で処理した後にreturn文を試してみたが、それは問題を解決しなかった。誰にもアイデアはありますか？

gulp.task('compile:spa', ['deploy:plugins', 'minify:css', 'minify:js']); 

gulp.task('deploy:plugins', function (cb) { 
var paths = { 
    'wwwroot/assets/plugins/core-js': 'node_modules/core-js/client/shim*.js', 
    'wwwroot/assets/plugins/rxjs': 'node_modules/rxjs/**/*.js', 
    'wwwroot/assets/plugins/zone.js': 'node_modules/zone.js/dist/zone.js', 
    'wwwroot/assets/plugins/reflect-metadata': 'node_modules/reflect-metadata/Reflect*.js', 
    'wwwroot/assets/plugins/systemjs': 'node_modules/systemjs/dist/system.src.js', 
    'wwwroot/assets/plugins/@angular': ['node_modules/@angular/*/index.js', 'node_modules/@angular/*/{bundles,src}/**/*.js'], 
    'wwwroot/assets/plugins/jquery': 'bower_components/jquery/dist/jquery*.js', 
    'wwwroot/assets/plugins/lodash': 'node_modules/lodash/*.js', 
    'wwwroot/assets/plugins/ng2-bootstrap': ['node_modules/ng2-bootstrap/ng2-bootstrap.js', 'node_modules/ng2-bootstrap/components{,/**/*.js}'], 
    'wwwroot/assets/plugins/ng2-datetime': ['node_modules/ng2-datetime/ng2-datetime.js', 'node_modules/ng2-datetime/{,src/ng2-datetime/**/*.js}'], 
    'wwwroot/assets/plugins/ng2-slim-loading-bar/css': ['node_modules/ng2-slim-loading-bar/ng2-slim-loading-bar.css'], 
    'wwwroot/assets/plugins/ng2-slim-loading-bar/js': ['node_modules/ng2-slim-loading-bar/ng2-slim-loading-bar.js', 'node_modules/ng2-slim-loading-bar/{,src/**/*.js}'], 
    'wwwroot/assets/plugins/ng2-bs3-modal': ['node_modules/ng2-bs3-modal/ng2-bs3-modal.js', 'node_modules/ng2-bs3-modal/{directives,components}/**/*.js'], 
    'wwwroot/assets/plugins/alertify.js/css': 'bower_components/alertify.js/themes/{alertify.core,alertify.bootstrap}.css', 
    'wwwroot/assets/plugins/alertify.js/js': 'bower_components/alertify.js/lib/alertify.js', 
    'wwwroot/assets/plugins/bootstrap': 'bower_components/bootstrap/dist/{,css/bootstrap.css,fonts/*.{eot,svg,ttf,woff,woff2},js/bootstrap.js}', 
    'wwwroot/assets/plugins/bootstrap-datepicker': 'bower_components/bootstrap-datepicker/dist/{,css/bootstrap-datepicker.css,js/bootstrap-datepicker.js,locales/*.js}', 
    'wwwroot/assets/plugins/bootstrap-timepicker': 'bower_components/bootstrap-timepicker/{,js/bootstrap-timepicker.js}', 
    'wwwroot/assets/plugins/font-awesome': 'bower_components/font-awesome/{,css/font-awesome.css,fonts/*.{eot,svg,ttf,woff,woff2}}' 
}; 
for (var path in paths) { 
    gulp.src(paths[path]) 
     .pipe(gulp.dest(path)); 
} 
cb(); 
}); 

gulp.task('compile:less', function (cb) { 
var paths = { 
    'wwwroot/assets/plugins/bootstrap-timepicker/css': 'bower_components/bootstrap-timepicker/css/timepicker.less', 
    'wwwroot/assets/css': 'wwwroot/assets/less/styles.less' 
}; 
for (var path in paths) { 
    gulp.src(paths[path]) 
     .pipe(plumber()) 
     .pipe(less()) 
     .pipe(gulp.dest(path)); 
} 
cb(); 
}); 

gulp.task('bundle:css', ['compile:less'], function (cb) { 
var paths = { 
    'wwwroot/assets/css/bundle.dev.css': [ 
     'wwwroot/assets/plugins/bootstrap/css/bootstrap.css', 
     'wwwroot/assets/plugins/boostrap-datepicker/css/boostrap-datepicker.css', 
     'wwwroot/assets/plugins/bootstrap-timepicker/css/bootstrap-timepicker.css', 
     'wwwroot/assets/plugins/alertify.js/css/alertify.core.css', 
     'wwwroot/assets/plugins/alertify.js/css/alertify.bootstrap.css', 
     'wwwroot/assets/plugins/ng2-slim-loading-bar/css/ng2-slim-loading-bar.css', 
     'wwwroot/assets/css/styles.css'], 
    'wwwroot/assets/css/bundle.prod.css': [ 
     'wwwroot/assets/plugins/bootstrap/css/bootstrap.css', 
     'wwwroot/assets/plugins/boostrap-datepicker/css/boostrap-datepicker.css', 
     'wwwroot/assets/plugins/bootstrap-timepicker/css/bootstrap-timepicker.css', 
     'wwwroot/assets/plugins/alertify.js/css/alertify.core.css', 
     'wwwroot/assets/plugins/alertify.js/css/alertify.bootstrap.css', 
     'wwwroot/assets/plugins/ng2-slim-loading-bar/css/ng2-slim-loading-bar.css'] 
}; 
for (var path in paths) { 
    var folder = path.match(/(.*)[\/\\]/)[1] || '' 
    var file = path.replace(/^.*[\\\/]/, '') 

    gulp.src(paths[path]) 
     .pipe(concat(file)) 
     .pipe(gulp.dest(folder)); 
} 
}); 

gulp.task('minify:css', ['bundle:css'], function (cb) { 
var paths = { 
    'wwwroot/assets/plugins/font-awesome/css/': 'wwwroot/assets/plugins/font-awesome/css/font-awesome.css', 
    'wwwroot/assets/css/': ['wwwroot/assets/css/bundle.dev.css','wwwroot/assets/css/bundle.prod.css'], 
}; 
for (var path in paths) { 
    gulp.src(paths[path]) 
    .pipe(rename({ suffix: '.min' })) 
    .pipe(cssmin()) 
    .pipe(gulp.dest(path)); 
} 
cb(); 
}); 

gulp.task('bundle:js', function (cb) { 
var paths = { 
    'wwwroot/assets/js/bundle.js': [ 
     'wwwroot/assets/plugins/jquery/jquery.js', 
     'wwwroot/assets/plugins/boostrap/js/bootstrap.js', 
     'wwwroot/assets/plugins/alertify.js/js/alertify.js', 
     'wwwroot/assets/plugins/bootstrap-datepicker/js/bootstrap-datepicker.js', 
     'wwwroot/assets/plugins/boostrap-timepicker/js/bootstrap-timepicker.js', 
     'wwwroot/assets/plugins/core-js/shim.js', 
     'wwwroot/assets/plugins/zone.js/zone.js', 
     'wwwroot/assets/plugins/reflect-metadata/Reflect.js', 
     'wwwroot/assets/plugins/systemjs/system.src.js', 
     'wwwroot/assets/js/systemjs.config.js'] 
}; 
for (var path in paths) { 
    var folder = path.match(/(.*)[\/\\]/)[1] || '' 
    var file = path.replace(/^.*[\\\/]/, '') 

    gulp.src(paths[path]) 
     .pipe(concat(file)) 
     .pipe(gulp.dest(folder)); 
} 
cb(); 
}); 

gulp.task('minify:js', ['bundle:js'], function (cb) { 
var paths = { 
    'wwwroot/assets/js/': ['wwwroot/assets/js/core.js','wwwroot/assets/js/bundle.js'] 
}; 
for (var path in paths) { 
    gulp.src(paths[path]) 
     .pipe(rename({ suffix: '.min' })) 
     .pipe(uglify()) 
     .pipe(gulp.dest(path)); 
} 
cb(); 
}); 

Answer 1

gulpストリームのIO操作は非同期ですが、非同期性を正しく処理していません。たとえば、このタスクを取る：

gulp.task('deploy:plugins', function (cb) { 
    var paths = { 
    //... 
    }; 
    for (var path in paths) { 
    gulp.src(paths[path]) 
    .pipe(gulp.dest(path)); 
    } 
    cb(); 
}); 

、あなたのタスクが完了した一口に言っているあなたの仕事関数の最後でcb()を呼び出すことによって。しかし、gulp.src()で作成したすべてのストリームは非同期です。つまり、cb()に電話をしたときにまだ終了していないことを意味します。

これらのストリームをタスクから返すことによって、正しくsignal async completionする必要があります。

そして、あなたは、各タスクで複数のストリームを作成しているので、あなたが最初に（merge-streamを使用して）1つのストリームにそれらのストリームをマージする必要があります：あなたの他のすべてのタスクのための

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

gulp.task('deploy:plugins', function() { 
    var paths = { 
    //... 
    }; 
    var stream = merge(); 
    for (var path in paths) { 
    stream.add(gulp.src(paths[path]) 
    .pipe(gulp.dest(path))); 
    } 
    return stream; 
}); 

同じこと。