galkinrost / gulp-rev-css-url

CSS-URL

The lightweight plugin to override urls in css files to hashed after gulp-rev

What is the result?

See here

Install

npm install gulp-rev-css-url

Usage

var gulp=require('gulp');
var rev=require('gulp-rev');
var override=require('gulp-rev-css-url');

gulp.task('rev',function(){
    return gulp.src('./app/**/*')
                .pipe(rev())
                .pipe(override())
                .pipe(gulp.dest('./build/'))
                .pipe(rev.manifest())
                .pipe(gulp.dest('./build/'));
});

AND

gulp rev

Tests

npm test

License

MIT

gulp-rev-css-url's Issues

A little suggestion to gulp-rev-css-url

Hi Ben and all the contributers：
In the process of using gulp-rev-css-url, it is found that the css files under the Windows system do not recognize the file path when they are introduced into the file path ,because of the “/”,hoping to do some processing to the window system.
The problem of window system
Before conversion：
body,html{ background: url(../img/test.png); }
After conversion：
body,html{ background: url(../img/test.png); }
My solution：
index.js:
line 56：
var origPath = __f.origPath.replace(new RegExp('\' + path.sep, 'g'), '/').replace(/./g, '\.').replace(///g, '\/');
Before conversion：
body,html{ background: url(../img/test.png); }
After conversion：
body,html{ background: url(../img/test-681e226197.png); }

LICENSE file

You should include a LICENSE file in the repository with the full text of the MIT License and a copyright notice rather than just stating that you're using it. I'd like to honor the license, but to do so I need to include the copyright notice (which there currently is none).

gulp-rev was switched to 10 character hash

sindresorhus/gulp-rev@11e859e

Remove gulp-util using the following API replacements

gutil.File => https://www.npmjs.com/package/vinyl
gutil.replaceExtension => The .extname property on Vinyl objects or https://www.npmjs.com/package/replace-ext
gutil.colors => https://www.npmjs.com/package/ansi-colors
gutil.date => https://www.npmjs.com/package/date-format
gutil.log => https://www.npmjs.com/package/fancy-log
gutil.template => https://www.npmjs.com/package/lodash.template
gutil.env => https://www.npmjs.com/package/minimist
gutil.beep => https://www.npmjs.com/package/beeper
gutil.noop => https://www.npmjs.com/package/through2
gutil.isStream => Use the .isStream() method on Vinyl objects
gutil.isBuffer => Use the .isBuffer() method on Vinyl objects
gutil.isNull => Use the .isNull() method on Vinyl objects
gutil.linefeed => Use the string '\n' in your code
gutil.combine => https://www.npmjs.com/package/multipipe
gutil.buffer => https://www.npmjs.com/package/list-stream
gutil.PluginError => https://www.npmjs.com/package/plugin-error

https://medium.com/gulpjs/gulp-util-ca3b1f9f9ac5

absolute paths get replaced

I don't think that absolute paths should be getting replaced

gulp-rev-js-url

Can you fork/adapt for JS?

This does not work

I would like to point out that this plugin does not work. In your example, you're calling override() after rev() has run, which does replace the URLs in the CSS. However, the giant glaring issue is that if an image/font/etc path in the CSS has changed, the CSS will be modified, which results in the original hashed CSS file being updated, instead of a new CSS with a new hash being created. This doesn't actually revision the CSS file and completely fails for any cache busting.

There is literally no way for this to work after rev(), as rev() would need to be called again to generate a new hash, but doing so causes a double hash. This also wouldn't work before rev() as the image/font/etc hasn't been updated with a new hash yet.

If am I completely misunderstanding something, please let me know, as nothing I try works correctly.

How to use gulp-npm-dist together to solve the problem of font file path substitution?

Mainly in the case of using gulp-npm-dist, the font file path substitution problem in the Css file in fontawesome-free.
Of course, in actual situations, the project is not only dependent on one project, so it is more convenient to use gulp-npm-dist.

https://www.npmjs.com/package/gulp-npm-dist
https://www.npmjs.com/package/@fortawesome/fontawesome-free

@galkinrost

In addition, can anyone continue to update the maintenance dependencies to the latest version and release it?