Gulp依赖任务

Question

我目前遇到运行复合任务的问题＆＃34; compile：spa＆＃34;使用VS 2015更新3，间接执行5个任务。我已将问题缩小到缩小任务＆＃34; minify：css＆＃34;和＆＃34;缩小：js＆＃34;。但是，如果我单独执行任务，他们会按预期工作，如果我重新运行＆＃34;编译：spa＆＃34;这是第二次有效。

我认为问题与＆＃34;捆绑：css＆＃34;的事实有关。和＆＃34;捆绑：js＆＃34;在＆＃34;缩小之前不会同步完成文件的写入：css＆＃34;和＆＃34;捆绑：js＆＃34;处理请求，然后无法找到任何文件。

我尝试整合来自＆＃34; bunde：css＆＃34;的所有代码。和＆＃34;缩小：css＆＃34;进入一项任务，它也无法按预期工作。我在每个函数中处理后尝试了返回语句，但没有解决问题。有没有人有任何想法？

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您的任务已完成。但是，使用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;
});

所有其他任务都是一样的。