Gulp依賴任務

Question

我目前遇到了VS 2015 update 3運行組合任務「compile：spa」的問題，該任務間接執行了5個任務。我已將問題縮小到縮小任務「縮小：css」和「縮小：js」。但是，如果我單獨執行這些任務，它們會按預期工作，如果我第二次重新運行「compile：spa」，它將起作用。

我認爲這個問題與「minit：css」和「bundle：js」處理請求之前「bundle：css」和「bundle：js」沒有同步完成寫入文件的事實有關並隨後找不到任何文件。

我試圖將「bunde：css」和「minify：css」中的所有代碼合併爲一個任務，並且它也不能按預期工作。在每個函數中處理完後，我嘗試了返回語句，但這並沒有解決問題。有沒有人有任何想法？

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）：

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; 
}); 

您所有的其他任務一樣。