Question

我有错误，但不知道为什么会这样。在下面的代码中我构建了css文件。任务＆＃34;构建单一风格＆＃34; （在runSequence中）构建临时的css文件。第二个任务将每个css文件与另外两个文件连接起来，并将它们写入更深层次的同一文件夹中，并放入＆＃34; / concat＆＃34;。

最后一个函数应该构建一个json文件

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

保存键值对，我可以将散列的css文件集成到不同的模板中。当所有css文件都写入＆＃34; / concat＆＃34; -folder时会被触发。

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

当我跑步＆＃34; gulp build-styles＆＃34;第一次功能＆＃34; buildManifest＆＃34;触发正确，但没有写入，好像它没有找到src文件夹。如果我运行它两次就行了。编写了rev文件，因此写入了json文件。任何假设？

问候，拉斯

编辑1：从函数中删除任务＆＃34; buildManifest＆＃34;并且在构建最终的css文件之后单独运行它也可以。但是在将任务放入序列时它无法正常工作。

编辑2：我试过了......在buildManifest函数中的其他内容：

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

现在我收到错误＆＃34; fs.readdirSync（paths.styles.destTemp +＆＃39; / concat＆＃39;）;＆＃34;并说它如下：

错误：ENOENT，没有此类文件或目录＆＃39; ./ web / assets / css / temp / concat＆＃39;。

看起来就像我创建的文件夹，它在创建之后就没有被检测到。

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

Gulp-rev：第一次没有工作，但在它之后

2 个答案: