gulp-rev-collector failed to replace file

when I run build, the gulp-rev-collector execute does not success Here is my gulpfile.js

var rev = require('gulp-rev')
var revCollector = require('gulp-rev-collector')
var rename = require('gulp-rename');

gulp.task('sass', done => {
    gulp.src('./src/css/*.scss')
      .pipe(sass())
      .pipe(rename({ suffix: '-min' }))
      .pipe(rev())
      .pipe(gulp.dest('dist/css'))
      .pipe(rev.manifest())
      .pipe(gulp.dest('rev/css'))
 
    done()
});
gulp.task('scripts', done => {
    gulp.src('src/js/*.js')
      .pipe(rev())
      .pipe(uglify())
      .pipe(gulp.dest('dist/js'))
      .pipe(rev.manifest())
      .pipe(gulp.dest('rev/js'));
    done()
});

gulp.task('revCollector', done => {
  gulp.src(['rev/**/*.json', 'src/*.html'])
    .pipe(revCollector({
      replaceReved: true,
      dirReplacements: {
        'css': '/dist/css/',
        'js': '/dist/js'
    }}))
    .pipe(gulp.dest('dist'))

  done()
})

gulp.task('build', gulp.series( 'sass', 'scripts', 'revCollector'))

And the html file is under the src folder, which looks like this:

<head>
   <link rel="stylesheet" href="css/normalize.css" />
  <link rel="stylesheet" href="css/index.css">
</head>
... ....
... ...
  <script src="js/jquery-3.5.1.min.js" type="text/javascript"></script>
  <script src="js/dayjs.min.js" type="text/javascript"></script>
  <script src="js/index.js"></script>
... ...
</body>
</html>

And the css rev-manifest.json is :

{
  "index-min.css": "index-min-a938f1db0e.css"
}

the js rev-manifest.json is :

{
  "dayjs.min.js": "dayjs-45b1d5a09b.min.js",
  "index.js": "index-28e73254bf.js",
  "jquery-3.5.1.min.js": "jquery-3.5-dc5e7f18c8.1.min.js"
}

Finally, the dist html file does not replace path correctly. What's the problem ?

Sep 27 '20 03:09 myLightLin

I got same problem, In gulp4 series. And I found something, But I have no solution.

gulp.task('revCollector', done => {
  let dir = fs.readdirSync('/path/to/gen/dist/by/gulp-rev');
  // I got notthing , in gulp series 
  console.log(dir); 
  // do
  done();
})

I found a temporary solution

gulp.task('build-html-rev', function (cb) {
    new Promise((resolve, reject) => {
        let t = setInterval(() => {
            let dir = fs.readdirSync(path.resolve(__dirname, '../../dist'));
            if (dir.includes('rev')) {
                clearInterval(t);
                resolve();
            }
        }, 10);
    }).then(() => {
        let dir = fs.readdirSync(path.resolve(__dirname, '../../dist/rev'));
        console.log(dir);
        gulp.src(['dist/rev/*.json', 'dist/**/*.html'])
            .pipe(revCollector())
            .pipe(gulp.dest('dist'));
        cb();
    });
});

Finally I think I solve this problem.

When you call revCollectorTask before, you should make sure predecessor task over.

But gulp4 official make a bad demo, done function should use like this.

gulp.task('sass', done => {
    gulp.src('./src/css/*.scss')
      //....
      .pipe(gulp.dest('rev/css'))
      .on('finish', () => {done()});
});

Use this code, make gulp when predecessor task over real done, then call revCollectorTask

Dec 03 '20 08:12 FantaZZ

@myLightLin

Dec 04 '20 14:12 FantaZZ

@FantaZZ @myLightLin In gulp4 series. // .pipe(rename({ suffix: '.min' })) // .pipe(rename({extname: '.min.js'})) // Be careful not to use rename！！！ revCollector config： .pipe( revCollector({ replaceReved: true, dirReplacements: { // Match original folder path : Output folder path ！！！ 'assets/css': 'assets/css', '/src/': '/src/assets/js' } }) ) dist html: `

`

Feb 02 '21 11:02 Adaer

gulp-rev-collector gulp-rev-collector copied to clipboard

failed to replace file

gulp-rev-collector
gulp-rev-collector copied to clipboard