Explicit Files & Preload type

[codebykenny]

Explicit Files & Preload type

Explicit Files

In its current state, gulp-version-number adds version numbers to all elements of the same type. This means that even external dependencies, or dependencies hosted on CDN's are all captured and appended a version number.

This can lead to unintended consequences, such as conflicting query variables, or cache-busting of CDN hosted dependencies that are not affected by our build process.

This PR introduces the ability to explicitly define files you wish target. Using the Object configuration for a type, you can add an array of files in the form of strings or regexps.

eg:

var versionConfig = {
  'value': '%MDS%',
  'append': {
    'cover': 1,
    'key': 'v',
    'to': [
      {
        'type': 'css',
        'files': ['application.css']
      },
      {
        'type': 'js',
        'files': ['application.js']
      },
      {
        'type'  : 'preload',
        'attr'  : ['href'],
        'files': ['application.js', 'application.css']
      }
    ],
  },
}

Preload type

Preloading of assets is increasingly becoming the standard, a preloaded element is defined as a link element with ref="preload". In order for preloaded assets to work as intended the preload href needs to match the asset href.

i.e. :

Not correct:
<link rel="preload" href="/js/application.js" as="script">
<script src="/js/application.js?v=1497c75251306822999749513c13e01c"></script>

Correct:
<link rel="preload" href="/js/application.js?v=1497c75251306822999749513c13e01c" as="script">
<script src="/js/application.js?v=1497c75251306822999749513c13e01c"></script>

By adding the preload type we can make sure preload links and assets match correctly

[shinate]

thanks