Gulp-rev：第一次不起作用，但是之后

Question

我有一个错误，但不知道为什么会发生。 在以下代码中，我构建了css文件。 任务“ build-single-styles”（在runSequence中）将构建临时的css文件。 第二个任务将每个css文件与其他两个文件连接起来，并将它们写入更深一层的同一文件夹中，并写入“ / concat”。

最后一个功能应该建立一个json文件

{
  "base.css": "base-zt121112fd.css,
  ...
}

其中包含键/值对，可以将散列的CSS文件集成到不同的模板中。 当所有css文件都写入“ / concat”文件夹时，将触发该事件。

var runSequence = require('run-sequence');
var concat = require('gulp-concat');
var rev = require('gulp-rev');

//run single tasks in a row
gulp.task('build-styles', function(){
  runSequence('build-single-styles', 'concat-styles');
});

//build styles
gulp.task('build-single-styles', function() {
  return gulp.src(allStyles)
    .pipe($.plumber({ errorHandler: function (error) {}}))
    .pipe($.rubySass({
        style: sassStyle,
        compass: true,
        noCache: true
    }))
    .pipe(isProduction ? $.combineMediaQueries({ log: true }) : _.noop())
    .pipe(isProduction ? $.minifyCss({ keepSpecialComments: 1 }) : _.noop())
    .pipe($.plumber.stop())
    .pipe(gulp.dest(paths.styles.destTemp))
    .pipe($.size({
        showFiles: true
    }))
});

//concat each css with 2 others
gulp.task('concat-styles', function(){
  var files = fs.readdirSync(paths.styles.destTemp);
  var index = files.indexOf('slider.css');

  if(index > -1) files.splice(index, 1);

  var autosuggest = paths.styles.srcBase + '/autosuggest_inquisitor.css';

  for(var i = 0; i < files.length; i++) {
    gulp.src([paths.styles.destTemp + '/' + files[i], autosuggest, paths.styles.destTemp + '/slider.css'])
        .pipe($.concat({path: files[i], cwd: ''}))
        .pipe(gulp.dest(paths.styles.destTemp + '/concat'));

    if(i == files.length - 1) buildManifest();
}
});

function buildManifest(){
  gulp.src([paths.styles.destTemp + '/concat/*.css', !paths.styles.destTemp + '/concat/slider.css'])
    .pipe(rev())
    .pipe(gulp.dest(paths.styles.dest))
    .pipe(rev.manifest({ base: styleLinkup, path: 'styles-linkup.json' }))
    .pipe(gulp.dest(styleLinkup));
}

当我第一次运行“ gulp构建样式”时，函数“ buildManifest”能够正确启动，但是没有编写任何内容，好像找不到src文件夹。 如果我运行两次，它将起作用。 rev'd文件被写入，因此是json文件。 有什么假设吗？

问候，拉斯

编辑1：从功能“ buildManifest”中创建任务并在构建最终的css文件之后单独运行它也可以。 但是在将任务放入序列中时，它不起作用。

编辑2：我尝试过。 在buildManifest函数内部：

var concatFiles = fs.readdirSync(paths.styles.destTemp + '/concat');
console.log(concatFiles);

现在，我在“ fs.readdirSync（paths.styles.destTemp +'/ concat'）;”上收到错误消息 它说如下：

错误：ENOENT，没有这样的文件或目录'./web/assets/css/temp/concat'。

好像在创建之后就没有检测到我之前创建的文件夹。

Answer 1

pipe是异步运行的，因此在此块中，您对buildManifest的调用将在concat发生之前执行：

  for(var i = 0; i < files.length; i++) {
    gulp.src([paths.styles.destTemp + '/' + files[i], autosuggest, paths.styles.destTemp + '/slider.css'])
        .pipe($.concat({path: files[i], cwd: ''}))
        .pipe(gulp.dest(paths.styles.destTemp + '/concat'));

    if(i == files.length) buildManifest();

尝试将buildManifest自己的任务，并将其添加到您的runSequence

Answer 2

在不生成单个流并将它们全部合并在一起的情况下，最后一个任务（构建清单）会提前启动。

因此，我再次从清单中做出了自己的任务，创建了单个流并将其合并。 这样就可以了。

var runSequence = require('run-sequence'),
    concat = require('gulp-concat'),
    rev = require('gulp-rev'),
    merge = require('merge-stream');

gulp.task('build-styles', function(){
  runSequence('build-single-styles', 'concat-styles', 'build-manifest');
});

gulp.task('build-single-styles', function() {
  return gulp.src(allStyles)
    .pipe($.plumber({ errorHandler: function (error) {}}))
    .pipe($.rubySass({
        style: sassStyle,
        compass: true,
        noCache: true
    }))
    .pipe(isProduction ? $.combineMediaQueries({ log: true }) : _.noop())
    .pipe(isProduction ? $.minifyCss({ keepSpecialComments: 1 }) : _.noop())
    .pipe($.plumber.stop())
    .pipe(gulp.dest(paths.styles.destTemp))
    .pipe($.size({
        showFiles: true
    }))
});

gulp.task('concat-styles', function(done){
  var files = fs.readdirSync(paths.styles.destTemp),
      index = files.indexOf('slider.css'),
      autosuggest = paths.styles.srcBase + '/autosuggest_inquisitor.css',
      slider = paths.styles.destTemp + '/slider.css',
      streams = [];

  if (index > -1) files.splice(index, 1);

  for(var i = 0; i < files.length; i++) {
    streams.push(gulp.src([paths.styles.destTemp + '/' + files[i], autosuggest, slider])
        .pipe($.concat({path: files[i], cwd: ''}))
        .pipe(gulp.dest(paths.styles.destTemp + '/concat')));
  }
  return merge(streams);
});

gulp.task('build-manifest', function() {
  gulp.src([paths.styles.destTemp + '/concat/*.css', !paths.styles.destTemp + '/concat/slider.css'])
    .pipe(rev())
    .pipe(gulp.dest(paths.styles.dest))
    .pipe(rev.manifest({ base: styleLinkup, path: 'styles-linkup.json' }))
    .pipe(gulp.dest(styleLinkup));
});