CODEWITHSUNDEEP
javascriptgulpbower
ilter
ilter

Reputation: 4079

How to add version number to js and css files

I want to insert all my bower components into my index page with appropriate version suffixes. By version suffixes, I mean the version number in every component's specific version attribute in their bower.json file.

As an example,

I have jquery in my application's bower.json dependencies.

{
    "dependencies": {
        "jquery": "^2.2.0",
    }
}

And jquery component has its own .bower.json and that json has a version attribute.

{
  "name": "jquery",
  "main": "dist/jquery.js",
  "license": "MIT",
  "version": "2.2.0"
  // ETC...
}

What I want is to extract this version number from the component's .bower.json file and create a script tag like this

<script src="/bower_components/jquery/dist/jquery.js?version=2.2.0"></script>

I am using a gulp wiredep task to automatically insert my components in index.html. I can add custom suffixes to the src attribute of script tags by overriding options attribute of wiredep, using fileTypes attribute.

fileTypes: {
    html: {
        replace: {
            js: '<script src="{{filePath}}?v=0.1"></script>'
        }
    }
}

But I couldn't figure out how to get the version number of each specific component and how to override them seperately when wiredep inserts them on the page.

Is my approach correct? Then, how can I proceed? Or there is a better way to accomplish this...

P.S. -- This requirement is related to cache busting. But not at all. I'm using gulp-rev for cache busting my custom application js and css files. But bower componenets should not be cache busted in every build. I want to reference them with their version number and only use cache busting when I update them and cache bust using a new version suffix.

Upvotes: 2

Views: 3837

Answers (1)

Dave Bush
Dave Bush

Reputation: 2402

As requested --

There are several cache busting mechanisms that use checksums or hash of the data to implement cache busting that may suit your needs better than having to update a version number:

  • gulp-cache-bust
  • gulp-cachebust
  • gulp-bust

are a few I found just doing a google search

The one I've used in the recent past is the first (gulp-cache-bust)

Upvotes: 2

Related Questions