gulp-resolve-jsref

Used to import js files using grammar: '<link rel = "import" href = "filepath">'. It supports mult-level imports and automatically adjust the script reference path to be relative to the containing html file.

Usage no npm install needed!

<script type="module">
  import gulpResolveJsref from 'https://cdn.skypack.dev/gulp-resolve-jsref';
</script>

README

gulp-resolve-jsref Build Status Coverage Status

[NPM]

Please use 'gulp-resolve-import' instead. This plugin is no longer maintained.

Used to import js files using grammar: '<link rel = "import" href = "filepath">'. It supports mult-level imports and automatically adjust the script reference path to be relative to the containing html file.

Usage

  1. Declare imports in your file

/a.html

  <link rel = "import" href = "sub/b.jsref.html">

/sub/b.jsref.html

  <script type = "text/javascript" src="../../js/a.js"></script>
  <script type = "text/javascript">alert("Hello");</script>
  <script type = "text/javascript" src="../../js/b.js"></script>

  <link rel = "import" href = "sub2/c.jsref.html">

/sub/sub2/c.jsref.html

  <script type = "text/javascript" src="c.js"></script>
  <script type = "text/javascript">alert("World");</script>
  1. Specify the action in the build script.
  var gulp = require("gulp"),
      resolveJsRef = require("gulp-resolve-jsref");
    
  gulp.src("*.html").pipe(resolveJsRef());

The resulting html for a.html will be like:

  <script type = "text/javascript" src="../js/a.js"></script>
  <script type = "text/javascript">alert("Hello");</script>
  <script type = "text/javascript" src="../js/b.js"></script>

  <script type = "text/javascript" src="sub/sub2/c.js"></script>
  <script type = "text/javascript">alert("World");</script>

License

MIT