How to change img reference in css

[RickCole21]

I want to change:

.demo{
    background: url("../img/demo.jpg");
}

to like:

.demo{
    background: url("../img/demo-0317f424c0.jpg");
}

how can I do this?

[shonny-ua]

You need a manifest json file, like:

{
   "demo.jpg": "demo-0317f424c0.jpg"
}

Next - You give them and Your css file gulp-rev-collector. and...

[RickCole21]

thanks for the reply, but I've solved the problem.

before, I have generated the manifest json file for img, but what bothers me was that gulp task 'rev' in tutorial can only change img reference in html files, but not in css files...

now my solution is create a new 'css-rev'gulp task which can change img reference in css files in dist/css directory first, and then replace the old css files in dist/css directory , and it works :

gulp.task('rev-css', function () {

  return gulp.src(['rev/**/*.json', 'dist/css/*.css'])
    .pipe(revCollector({
      replaceReved: true,
    }))
    .pipe(gulp.dest('dist/css'))
});

thanks again.

[shonny-ua]

Yes.

You can modify 'rev' task from tutoprial to

return gulp.src(['rev/**/*.json', 'templates/**/*.html', 'css/**/*.css'])

Then you can filter html files and save them to 'dist/html'. Then revert filtration, separate css files, amd write to 'dist/css'.

[RickCole21]

yes!, that is what I was trying to accomplish, but it never worked....

I got the idea but how can I filter the html and css files, I thought there is only one dest like this ( I'm relatively new to gulp, so... ) :

return gulp.src(['rev/**/*.json', 'src/*.html'])
    .pipe(revCollector({
      replaceReved: true,
    }))
    .pipe(gulp.dest('dist'))

like create a new gulp task or just write in this 'rev' task ?

[shonny-ua]

Use gulp-filter

const filter = require('gulp-filter');
const fHtml = filter(['**/*.html', '*.html', '../**/*.html'], {restore: true});
const fCss = filter(['**/*.css', '*.css', '../**/*.css'], {restore: true});

return gulp.src(['rev/**/*.json', 'src/*.html', 'css/**/*.css'])
    .pipe(revCollector({
      replaceReved: true,
    }))
    .pipe(fHtml)
    .pipe(gulp.dest('dist/html'))
    .pipe(fHtml.restore)
    .pipe(fCss)
    .pipe(gulp.dest('dist/css'))

[RickCole21]

got it ~ thanks alot