inline-resource

A node utility to inline everything you want to inline, including image, css, html, etc.

Features

• Support inline image referred by img html element or css url using base64 data-uri

• Support inline svg files referred by css or html using svg source file or base64 data-uri

• Support inline font files using base64 data-uri

• Support inline css file referred by link element or @import rule

• Support inline html file referred by link element

• Support inline js file referred by script element or document.write statement

• Support custom inline method using __inline(path) in script or html

• The script and style element content defined in html can also be processed

• The inline is processed recursively and support inline all local assets into a single file or specify which asset need to been processed inline

• The inline file support compress option

• You can custom your inline processor or inline task if existed cannot satisfy

How to use

Install

npm install inline-resource --save

A simple example

var inliner = require('inline-resource');
var result = inliner.inline({
    inlineAll: true,
    files: ['index.html'],
    svg: {
        useSource: true
    }
});

Using with web server

• edp webserver

  {
      location: /\.js($|\?)/,
      handler: [
          file(),
          function (context) {
              var req = context.request;
              var path = req.pathname.replace(/^\/+/, '');
              var result = inliner.inline({
                  files: [{path: path, data: context.content}],
                  inlinePathResolver: function (path) {
                      return {path: path.replace(/\{\$course_host\}\//, ''), dir: '.'};
                  }
              });
              context.content = result[0].data;
          }
      ]
  },
  {
      location: /\.php/,
      handler: [
          php('php-cgi'),
          function (context) {
              var req = context.request;
              var path = req.pathname.replace(/^\/+/, '');
              var result = inliner.inline({
                  files: [{path: path, data: context.content}],
                  processor: {php: 'html'},
                  img: false,
                  css: false,
                  html: false,
                  inlinePathResolver: function (path) {
                      var url = require('url').parse(path, true);
                      var newPath = url.pathname.replace(/^\/+/, '') + url.search;
                      return {path: newPath, dir: '.'};
                  }
              });
              context.content = result[0].data;
          }
      ]
  },

Options

• root - string optional the root directory to process, by defautl using current working directory

• output - string optional the output directory, by default, none will output

• files - Array the file to been processed inline, the file pattern using minimatch, the regexp or file object is supported, the file object structure: {data: string, path: string}, the path is relative to root

• fileMap - Object optional the all read-ahead file collection, the key is path relative to root, the value is file data

• processor - Object optional custom the processor type using, e.g., {mustache: 'html'}

• inlinePathResolver - Function optional resolve the inline file path

  inlinePathResolver: function (path, file) {
      var path = path.replace(/{%site_host%}\//, '');
      
      return path;
      // var dir;
      // if (/\W+views\//.test(file.path)) {
      //     dir = 'example';
      // }
      // you can specify the directory that the path relative to
      // return {path: path, dir: dir};
  }

• inlineAll - boolean optional whether inline all local resources referred by the processed file, by default false, specify which resource need to be inline manually using url inline query param. Notice if setting true, you should manuall specify which resource type you want to inline all using the following resource type option, e.g., setting css: true or css: {/*options*/}, it will inline all css files.

• inlineParamName - string optional by default _inline, specify the inline resource like:

  <img src="a/b.jpg?_inline">
  
  <!-- the value of the inline param can used to specify the relative directory of the inline path --> 
  <img src="a/b.jpg?_inline=example">
  

• ignoreCompressFiles - Array<string|RegExp> optional the files to been ignored when enable compress option

• img - boolean|Object optional whether enable image inline process using base64 encode, by default true if inlineAll is not true

  img: {
      // the image file size less than or equal 1024 byte will be inlined
      limit: 1024
  }

• font - boolean|Object optional whether enable font inline process using base64 encode, by default true if inlineAll is not true

  font: {
      // the font file file size less than or equal 1024 byte will be inlined
      limit: 1024
  }

• svg - boolean|Object optional whether enable svg inline process using base64 encode or svg source, by default true if inlineAll is not true

  svg: {
      // by default, using base64 encode
      useSource: false, 
      
      // the svg file size less than or equal 1024 byte will be inlined
      limit: 1024
      
      // whether compress svg source file when inline svg source, by default false
      // if enabled, please make sure `svgo@^1.0.0` is installed in global or working dir
      compress: false 
  }

• css - boolean|Object optional whether enable css inline process, by default true if inlineAll is not true

  css: {
      // whether rebase the file path referred by inline css file, by default false
      rebase: false, 
      rebase: {
          absolute: true, // rebase as absolute path
          ignore: function (url, relativeFile, targetFile) { // ignore url rebase
              return false;
          }
      },
      rebase: function (url, relativeFile, targetFile) { // custom rebase logic
          var isLocalPath = this.isLocal(url);
          var absPath = this.resolve(url, relativeFile);
          var rebasePath = this.rebase(url, relativeFile, targetFile);
          return url;
      }
      
      // whether compress css source file, by default false
      // if enabled, please make sure `clean-css@4` is installed in global or working dir
      compress: false 
  }

• js - boolean|Object optional whether enable js inline process, by default true if inlineAll is not true

  js: {
      // whether using the custom inline method, by default true
      // e.g., var tpl = '__inline("./a.tpl")'; // output: var tpl = '<inline tpl content>'
      // '__inline("./a.js")' // output: <inline js file content>
      custom: false, 
      
      // whether compress js source file, by default false
      // if enabled, please make sure `uglify-js@3` is installed in global or working dir
      compress: false 
  }

• html - boolean|Object optional whether enable html inline process, by default true if inlineAll is not true

  html: {
      // whether compress html source file, by default false
      compress: false 
  }

API

• addInlineTaskFor(type, tasks) - add custom inline task for the specified processor type

var inliner = require('inline-resource');
inliner.addInlineTaskFor('html', function (file) {
    var me = this;
    var inlineTplRegexp = /<!--\s*inline:\s*([^\s]+)\s*-->/g;
    return file.data.replace(inlineTplRegexp, function (match, path) {
        var result = me.getInlineResult(path);
        if (result) {
            return result.data;
        }
        return match;
    });
});

• registerInlineProcessor(type, processor) - register inline processor for custom file type

inliner.registerInlineProcessor('etpl', {
    taskList: [
        function (file) {
            var me = this;
            return file.data.replace(
                /<!--\s*include:\s*([^\s]+)\s*-->/g,
                function (match, path) {
                    var result = me.getInlineResult(path);
                    if (result) {
                        return result.data;
                    }
                    return match;
                }
            )
        }
    ],
    // if support compress option, implement it
    compress: function (file, compressOption) {
        return file.data;
    }
});