vincentmac / gulp-fingerprint Goto Github PK

Prints this error TypeError: file.pipe is not a function coming from line 125 of gulp-fingerprint/index.js:125:12

While the plugin works fine for translating url() imports for regular images and most fonts, it ignores fonts that require a specific target. For instance:

src: url("OpenSans-Regular.svg#dc56f0938c09c27a4156bb0f8f5176a2")

won't be altered when I run the CSS through fingerprint().

If the url parameter contains ?, then the path is ignored too, as illustrated here:

src: url("OpenSans-Regular.eot?#iefix")

My suggestion would be to look for a specific target (the # or ? and anything after) and insert the rev'd path before it.

For application-specific reasons I only store the file name and its subfolder in the revision file like this

{
  "logo.png": "logo-afc86ade.png",
  "wait/wait1.gif": "wait/wait1-e244a2fd-e244a2fd.gif",
  ...
}

for them images, in the CSS I have these lines:

background: url("/img/logo.png")

background-image: url("/img/wait/wait1.gif")

None of your gulp options and default regex won't support this.

I think we need another option to prepend a subfolder to the regex. In my case something like this:

        .pipe(fingerprint('/img/rev-manifest.json'), {
            prependToRegex: '/img/'
        }))

so that

background-image: url("/img/wait/wait1.gif")

becomes

background-image: url("/img/wait/wait1-e244a2fd-e244a2fd.gif")

Agree @vincentmac?

When I already have the whole CSS compressed into one very long line only, then this gulp plugin seems to replace the first occurrence only.

Try it yourself ...

Just going through the doc atm, im getting problem on requiring the rev-manifest.json file.

var manifest = require('../../dist/rev-manifest');

I get this error Error: Cannot find module './path/to/rev-manifest'. Does require not work for json files anymore, and has to be modules ?

Should it be:

var manifest = '../../dist/rev-manifest';

[16:57:59] Starting 'stylus'...
[16:58:01] gulp-fingerprint Found: img/logo.png
[16:58:01] gulp-fingerprint Replaced: /img/logo-afc86ade.png
[16:58:01] gulp-fingerprint Found: img/bk_tiny_logo_alpha_wo_slogan.png
[16:58:01] gulp-fingerprint Replaced: /img/bk_tiny_logo_alpha_wo_slogan-f56e0724.png
[16:58:01] gulp-fingerprint Found: img/deafradio.png
[16:58:01] gulp-fingerprint Replaced: /img/deafradio-15e458e4.png
[16:58:01] gulp-fingerprint Found: img/wait/wait1.gif
[16:58:01] gulp-fingerprint Replaced: /img/wait/wait1-5d02e7fc.gif
[16:58:01] gulp-fingerprint Found: img/wait/wait2.gif
[16:58:01] gulp-fingerprint Replaced: /img/wait/wait2-445ed196.gif
[16:58:01] gulp-fingerprint Found: img/wait/wait3.gif
[16:58:01] gulp-fingerprint Replaced: /img/wait/wait3-8c9b2abd.gif
[16:58:01] gulp-fingerprint Found: img/wait/wait4.gif
[16:58:01] gulp-fingerprint Replaced: /img/wait/wait4-7a2a5429.gif
[16:58:01] gulp-fingerprint Found: img/wait/wait5.gif
[16:58:01] gulp-fingerprint Replaced: /img/wait/wait5-dc95886a.gif
[16:58:01] gulp-fingerprint Found: img/wait/wait6.gif
[16:58:01] gulp-fingerprint Replaced: /img/wait/wait6-eb1fd340.gif
[16:58:01] gulp-fingerprint Found: img/wait/wait7.gif
[16:58:01] gulp-fingerprint Replaced: /img/wait/wait7-795a37c0.gif

gulp-fingerprint is behaving weird and seems to exit without any further information. I expect my gulp stylus task to end properly but once the fingerprint part is running, the whole task aborts without any information.

Hello again

Currently I have .pipe(fingerprint(require(PATH_2_JSON)))

but I think it would be more elegant if I could do just .pipe(fingerprint(PATH_2_JSON)) and you figure out internally if it's a json or a string. If it's a string, then automatically load it via require.

Hey! The current version of this project is 0.3.2, which under semantic versioning means that it isn't suitable for production usage because it's still in development.

If you consider this project stable enough to use in development, would you be able to bump the project to 1.0.0? Thank you!

Thanks for the nice plugin. Very useful!

So, I have a small request. My rev json looks like:

{
  "logo.jpg": "images/logo-2d4a1176.jpg",
  "some-image.png": "images/some-image-abd84705.png"
}

and in my CSS I have url("/img/logo.jpg")

It won't work like that because the img/ part is missing in the json. But I do not want to change this for other reasons.

Probably we need a new option here to define the subfolder which will automatically adjust the regex. Or do you have a better idea?

For example if you got a JavaScript code where something like this is included:
var a = "href="+variable+'something'+variable+"/index.html";

It matches to the href, but then the href string does contain single quotes which fails horribly when parsing.

Hey -- the standard regex (https://github.com/vincentmac/gulp-fingerprint/blob/master/index.js#L22) uses the star operator to capture urls, which results in, e.g., url() being matched, with no capture group. That then causes a failure because the code here https://github.com/vincentmac/gulp-fingerprint/blob/master/index.js#L58 returns the match index, not the matched text.

This won't happen if you use the + operator instead.

Sorry I don't have time to create a PR or tests for this -- thought at least I could let you know.

in index.js at line...

if (options.verbose) gutil.log(PLUGIN_NAME, 'Found:', chalk.yellow(m.replace(/^\//, '')));

"m" is not defined

Currently to use gulp-fingerprint with gulp-rev, you have to have them as two separate, synchronous tasks. The more gulp-y way of making this work would be a syntax like the following:

gulp.task("revision", function() {
  return gulp.src("my/files/**/*")
    .pipe(rev())
    .pipe(gulp.dest("dist/")) // write revisioned files
    .pipe(rev.manifest()) // build manifest
    .pipe(fingerprint()) // use built manifest from stream
    .pipe(gulp.dest("dist/")); // write manifest + fingerprinted files
});