shonny-ua / gulp-rev-collector

Static asset revision data collector from manifests, with was generated from different streams and replace they's links in html template.
MIT License
149 stars 41 forks source link

failed to replace file #62

Open myLightLin opened 4 years ago

myLightLin commented 4 years ago

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 ?

FantaZZ commented 3 years ago

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

FantaZZ commented 3 years ago

@myLightLin

Adaer commented 3 years ago

@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: `

`