furzeface / cachebust Goto Github PK

I deprecated this a while back, but if it's of any use to anyone feel free to maintain it!

Right now there are only two options for the busting type, MD5 or timestamp.

In my case it would be useful if cachebust had a constant type, as in my build system I have a buildNumber variable available.
For example, today using https://github.com/furzeface/gulp-cache-bust I have

gulp.src('./dist/*/*.html')
    .pipe(cachebust({
        type: 'timestamp'
    }))
    .pipe(gulp.dest('./dist'));

What I would like is

gulp.src('./dist/*/*.html')
    .pipe(cachebust({
        type: 'constant',
        value: BUILD_NUMER
    }))
    .pipe(gulp.dest('./dist'));

Thanks

The need

In Angular we use ng-href on link tags to load custom stylesheet. So we need cache busting to work on ng-href attribute.

The solution

Quick and dirty:

• https://github.com/furzeface/cachebust/blob/master/lib/cachebust.js#L18
  • Hardcode ng-href support - return content.attribs['ng-href'] || content.attribs.href;. The same way we can hardcode ng-src support.
• https://github.com/furzeface/cachebust/blob/master/lib/cachebust.js#L57
  • Hardcode ng-href and ng-src support - var protocolRegEx = /^http(s)?/, elements = $('script[src], script[ng-src], link[rel=stylesheet][href], link[rel=stylesheet][ng-href]');

The discussion

As there may be need for support for other tags (img...) and other custom attributes what would be the preferred way to customize the behavior? Give in some kind of map of elements and attributes?

For ex:
options: { targets: { link: ['href', 'ng-href'], script: ['src', 'ng-src'] } }

Open to all ideas. Once we agree on a solution, I'll implement it.

I was reading over the cachebust.js. It looks like it's getting an MD5 checksum on the fileContents of the given html file, and not whatever the fileContents of the given scriptSrc/styleHref. Was this intentional?

@furzeface What about support for *.(jpg,gif,png,svg) in tags?

Im trying to switch from grunt to gulp... this library is very close to what I need... but apparently if you have two identical file references... only the first one will get busted in a particular page.

<script type="text/javascript">
    window.no_cache  = "client/static/js/app.js?v=thisfilegotbustedabc123";  // gets busted
</script>
<script src="client/static/js/app.js"></script>  // <!-- not busted -->

why would I do this? My project passing the md5 of the main js file and is basically using it as a Version number... (among other things). Then in my app.... I use it for additional cachebusting.. like certain ajax requests:

  // ajax httpInterceptor .. 
  // ... some code to get md5 hash etc...
  request.url = request.url + symbol + 'no_cache='+md5;

Maybe I'm doing things unlike most people... but I'm trying to keep the project simple, and implement
a basic level of cache-busting. I've looked at other setups and other options that include things like re-naming files and resources.. that just seems like overkill.

I noticed your using cheerio to loop the dom... but doing a non-global replace... so each element only replaces the first resource found.

Even if you don't want to do a global replace.. this is a bug as its finding a <script src=".."> but busting it somewhere else...

Thoughts...
Thanks.

Hi !
I have a problem with the current version of cachebust.
I'm working with davinkevin which sent to you a message earlier : #1

Actually the problem is : if a script tag is inside our base file and this tag don't contain src attribute : cachebust failed unfortunately ;(
--> at line 50 "scripts[j].attribs.src.split("?")[0];" because src is undefined

I prepared a push request for you ;)
Let me know if you can published this fix as soon as possible ?!

When using relative paths in html documents in sub directories, it doesn't resolve correctly. Change the path to an absolute path and it works again. Error looks like this where doc root is www/ from gulpfile position:

$ gulp
[14:32:12] Using gulpfile ~/.../gulpfile.js
[14:32:12] Starting 'cachebust'...
fs.js:641
  return binding.open(pathModule._makeLong(path), stringToFlags(flags), mode);
                 ^

Error: ENOENT: no such file or directory, open '/.../www/assets/js/main.js'

The correct path here would've been /.../www/cv/assets/js/main.js as it was referenced from an html doc in the www/cv/ dir with <script type="text/javascript" src="assets/js/main.js"></script>. Browsers resolve that correctly.

gulpfile looks like this:

gulp.task('cachebust', function(){
  return gulp.src('./www/**/*.html')
    .pipe(cachebust({
      type: 'MD5'
    }))
    .pipe(gulp.dest('./www'));
});

Html imports are not getting busted.

Example import:
<link rel="import" href="elements.html" async>

Please change line 57 of /lib/cachebust.js to:
var protocolRegEx = /^(http(s)?)|\/\//, elements = $('script[src], link[rel=stylesheet][href]', link[rel=import][href]');

It should work.

Please update the gulp plugin also.

Thank you!

I am building a dynamic iframe with innerHTML (which has al the links and scripts as strings)
I guess in your code you try to load the elements jQuery style (cheerio)
Any chance for a quick fix to support strings as well?
Thanks