gulp-resolve-import

[]

Used to import file content using grammar: '<link rel = "import" href = "filepath">'. It supports multi-level imports and automatically adjust the resource reference path to be relative to the containing html file. The <img>, <audio>, <video>, <script>, <source> and <src-placeholder> tags, and inline style background url are supported.

Usage

1. Declare imports in your file

/a.html

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

/sub/b.jsref.html

  <audio src = "asset/aud.mp3"></audio>
  <span style = "background-image: url(../1.png)"></span>

  <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>

2. Specify the action in the build script.

  var gulp = require("gulp"),
      resolveImport = require("gulp-resolve-import");
    
  gulp.src("*.html").pipe(resolveImport());

The resulting html for a.html will be like:

  <audio src = "sub/asset/aud.mp3"></audio>
  <span style = "background-image: url(1.png)"></span>

  <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>

Supported source declaration

For html, this plugin currently handle the following html tags and corresponding attribute names to dynamically adjust the asset references:

1. link - href
2. script - src
3. img - src
4. audio - src
5. video - src
6. source - src
7. src-placeholder - src

You can use src-placeholder tag to let this plugin help manage the source that you may need to dynamically assign asset source, like:

    <audio></audio>
    <src-placeholder data-type = "ogg" src = "asset/m.ogg"></src-placeholder>
    <src-placeholder data-type = "m4a" src = "asset/m.m4a"></src-placeholder>
    <src-placeholder data-type = "mp3" src = "asset/m.mp3"></src-placeholder>

    var audioObj = document.querySelector("audio");
    var extNameAndTypes = {
        "ogg": "audio/ogg",
        "m4a": "audio/mpeg",
        "mp3": "audio/mpeg"
    };
    
    ["ogg", "m4a", "mp3"].forEach(function(extName){
        var sourceObj = document.createElement("source");
        sourceObj.type = extNameAndTypes[extName];
        sourceObj.src = document.querySelector("[data-type=" + extName + "]").getAttribute("src");
        audioObj.appendChild(sourceObj);
    });

For css, keyword url is used to identify potential asset reference.

Options

baseAbsolutePath {String}

Used as the base path to determine the final relative path of referring resources. Default to be the folder of the processing file.

prependText {String}

The text to be prepended while resolving imports. Default to be an empty string.

linkMetaFilter {Function}

The filter method is used to select imports to resolve, i.e., resolve imports conditionally. The method takes 1 argument of type: {LinkMeta} which has the following methods:

1. {Boolean} hasAttribute({String} name). Test if the <link> tag has the specified attribute.
2. {String} getAttribute({String} name). Get the specified attribute value.

linkMetaFilter_applyRecursively {Boolean}

Specify whether or not apply the filter method in the resolved import content. Default to be true.

License

MIT