npm.io
1.3.0 • Published 8 years ago

gulp-cdnfailover

Licence
MIT
Version
1.3.0
Deps
3
Vulns
0
Weekly
0
SummaryDependencyVersions

gulp-cdnfailover

gulp-cdnfailover is a gulp plugin to create HTML snippets that will try to load your JS/CSS sources from CDN locations and if there are any errors, it fails over to local sources. The HTML snippets for javascript are synchronous/blocking where as the CSS snippet will make its best effort to load the local files as quickly as possible.

Features

  • Failover HTML snippet: Creates failover HTML snippet for both JS and CSS
  • Integrity and crossOrigin: Both of these attributes are supported.
  • Replaces placeholders in HTML file: And outputs the file where the snippets are placed.

Usage

Install gulp-cdnfailover as a development dependency:

npm install --save-dev gulp-cdnfailover

Add it to your gulpfile.js:

var cdnfailover = require("gulp-cdnfailover");

gulp.src("./src/index.html")
 .pipe(cdnfailover({
      verbose: true,
      localfilesroot: 'resources/', // make sure it ends with a slash
      uselocalfilesonly: false,
      files: [{ name: 'jquery-slim-min-js',
                local: 'js/jquery/dist/jquery.slim.min.js',
                cdn: 'https://code.jquery.com/jquery-3.2.1.slim.min.js',
                cdnintegrity: 'sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN',
                cdncrossorigin: 'anonymous'},
              { name: 'bootstrap-min-css',
                local: 'css/bootstrap/dist/css/bootstrap.min.css',
                cdn: 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css',
                cdnintegrity:  'sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u',
                cdncrossorigin:  'anonymous'}]}))
  .pipe(gulp.dest("./dist"));

The module looks for <!-- cdnfailover:NAME_OF_ENTRY --> line and replaces with the appropriate snippet. It automatically detects if it is a JS or a CSS resource by checking the extension of the local.

For the example above, your src/index.html should have these lines: <!-- cdnfailover:bootstrap-min-css --> and <!-- cdnfailover:jquery-slim-min-js -->

Example:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <!-- cdnfailover:bootstrap-min-css -->
  </head>
  <body>
  <!-- Placed at the end of the document so the pages load faster -->
  <!-- cdnfailover:jquery-slim-min-js -->
  </body>
</html>

The output will look like this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel=​"stylesheet" href=​"https:​/​/​maxcdn.bootstrapcdn.com/​bootstrap/​3.3.7/​css/​bootstrap.min.css" integrity=​"sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/​K68vbdEjh4u" crossorigin=​"anonymous">​<script>​var e=document.styleSheets[document.styleSheets.length-1];if(typeof e==="undefined"||e.href!=="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"||((!e.cssRules||!e.cssRules.length)&&(!e.rules||!e.rules.length)))(function(){var e=document.createElement("link");e.rel="stylesheet",e.href="css/bootstrap/dist/css/bootstrap.min.css",document.head.appendChild(e)})();</script>
  </head>
  <body>
  <!-- Placed at the end of the document so the pages load faster -->
  <script src=​"https:​/​/​code.jquery.com/​jquery-3.2.1.slim.min.js" integrity=​"sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/​rE9/​Qpg6aAZGJwFDMVNA/​GpGFF93hXpG5KkN" crossorigin=​"anonymous" onerror=​"(typeof cdnfailover==='undefined')​?cdnfailover={_1:​true}​:​cdnfailover._1=true">​</script><script>(typeof cdnfailover!== 'undefined')&&cdnfailover.hasOwnProperty(_1)&&document.write('<script src="js/jquery/dist/jquery.slim.min.js"><\/script>');</script>
  </body>
</html>

Options

verbose

Type: Boolean

If true, log verbose while running.

uselocalfilesonly

Type: Boolean

If true, we don't do any of these tricks in this extension. We simply output a

Keywords

gulpplugin