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