Gulp-rev:不是第一次工作,而是在第一次工作之后工作

Gulp-rev: isn't working at the first time, but after it

本文关键字:工作 第一次 之后 Gulp-rev      更新时间:2023-09-26

我遇到了错误,但不知道为什么会发生。在下面的代码中,我构建了 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 build-styles"时,函数"buildManifest"触发正确,但没有写入任何内容,好像它没有找到src文件夹。如果我运行两次它,它可以工作。已修订的文件被写入,因此将写入 json 文件。有什么假设吗?

问候拉斯

编辑 1:从函数"buildManifest"中创建一个任务,并在构建最终的 css 文件后单独运行它也可以。但是在将任务放入序列中时它不起作用。

编辑 2:我在 buildManifest 函数中尝试了 sth. else:

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

现在我在"fs.readdirSync(paths.styles.destTemp + '/concat');"上收到一个错误,它说:

错误:ENOENT,没有这样的文件或目录"./web/assets/css/temp/concat"。

似乎我之前创建的文件夹在创建后没有立即检测到。

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

如果不生成单个流并将它们全部合并在一起,最后一个任务(构建清单)会提前触发。

所以我再次从清单中创建了一个自己的任务,创建单个流并合并它们。这样它就起作用了。

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