gulpfile.js: rev.manifest() not merging several JS tasks

Question

The code bellow doesn't merge correctly rev-manifest.json file. I loop several JS tasks and just one is merged, although hash files are being created and stored correctly.

I already tried a ton of things, I checked gulp-rev and some users seam to have similar problems. Some of them are creating several manifest files and proceed with the actual merge at the end. I would like to discard this solutions since it's slow and ugly.

If I comment the concat(...) line the manifest file registers all the JS tasks.

Is this a BUG or am I missing something here?

gulp 3.9.1 gulp-concat 2.6.0 gulp-rev 7.0.0

var gulp = require('gulp');
var less = require('gulp-less');
var minifycss = require('gulp-minify-css');
var jshint = require('gulp-jshint');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var rev = require('gulp-rev');

var jsFiles = {
 task1: [
  './path/file1.js'
 ],
 task2: [
  './path/file2.js',
     './path/file2.js'
 ]
};


function jsTask(key) {
 gulp.task(key, function() {
  gulp.src(jsFiles[key])
   .pipe(jshint())
   .pipe(jshint.reporter('default'))
   .pipe(uglify())
   // IT WORKS WHEN I COMMENT THIS LINE
   .pipe(concat(key + '.min.js'))
   .pipe(rev())
   .pipe(gulp.dest('./public/js'))
   .pipe(rev.manifest({merge:true }))
         .pipe(gulp.dest('.'));
 });
}


gulp.task('less', function() {
 return gulp.src(['./path/less/*.less'])
  .pipe(less({errLogToConsole: true}))
  .pipe(minifycss())
  .pipe(rev())
  .pipe(gulp.dest('./path/public/css'))
  .pipe(rev.manifest({merge:true }))
        .pipe(gulp.dest('.'));
});


for (var key in jsFiles) {
 jsTask(key);
}


var defaultTasks = ['less'];
for (var key in jsFiles) {
 defaultTasks.push(key);
}

gulp.task('default', defaultTasks);

score 1 · Answer 1 · answered May 03 '18 at 11:08

You can pass the name of the manifest file you want to create(different for each gulp task) to manifest function of the gulp-rev-all module like below

gulp.task('productionizeCss', function () {
  return gulp
    .src(['dist/prod/**/*.css'])
    .pipe(revAll.revision({
      fileNameManifest: 'css-manifest.json'
    }))
    .pipe(gulp.dest('dist/prod/'))
    .pipe(revAll.manifestFile())
    .pipe(gulp.dest('dist/prod/'));
}); 

gulp.task('productionizeJS', function () {
  return gulp
    .src(['dist/prod/**/*.js'])
    .pipe(revAll.revision({
      fileNameManifest: 'js-manifest.json'
    }))
    .pipe(gulp.dest('dist/prod/'))
    .pipe(revAll.manifestFile())
    .pipe(gulp.dest('dist/prod/'));
});

Here, I have two gulp tasks, one to revise all JS and one for CSS.So, I have created two manifest files css-manifest.json, js-manifest.json. Then I specified both the manifest files in src of the rev-replace module as shown below:

gulp.task('revReplaceIndexHtml', function () {
  var manifest = gulp.src(["dist/prod/js-manifest.json", 'dist/prod/css-manifest.json']);
  return gulp.src('dist/dev/referralswebui/index.html')
    .pipe(revReplace({ manifest: manifest, replaceInExtensions: ['.html']}))
    .pipe(gulp.dest('dist/prod/referralswebui/'));
});

score 0 · Answer 2 · answered Apr 04 '16 at 17:24

I would suggest using gulp-useref instead of gulp-concat.

Given your setup, I think key references a glob path, or at least I hope so. Otherwise you are trying to concatenate a single file, or no files which may crash the concat plug-in. Emphasis on may.

Also, since you are using gulp-rev, I suggest using gulp-rev-replace which will automatically update your index references to the reved files.

Edit

Sometimes rev.manifest behaves in ways that I would describe as buggy. Just to exhaust all possibilities remove the merge option for the manifest and run concat. Or run concat and remove manifest altogether.

gulpfile.js: rev.manifest() not merging several JS tasks

2 Answers2