gulp-inline-source-html

Inlines flagged js, css, and img sources in html with inline-source

Usage no npm install needed!

<script type="module">
  import gulpInlineSourceHtml from 'https://cdn.skypack.dev/gulp-inline-source-html';
</script>

README

gulp-inline-source-html

Inlines flagged js, css, and img sources in html with inline-source

npm JavaScript Style Guide Travis (.com) David License

This plugin is based on fmal/gulp-inline-source, which is no longer maintained. It now supports Gulp.js v4 and ES6 / ES2015.

Table of Contents

Description

Inline and compress tags that contain the inline attribute. Supports <script>, <link>, and <img> (including *.svg sources) tags by default.

Installation

Install gulp-inline-source-html as a development dependency

npm install --save-dev gulp-inline-source-html

How it works

Targate file src/html/index.html

<html>
  <body>
    <script src="../js/app.js" inline></script>
  </body>
</html>

Source file src/js/app.js

function test() {
  const foo = 'lorem ipsum';
  return foo;
}

Output file

<html>
  <body>
    <script>function test(){const a="lorem ipsum";return a}</script>
  </body>
</html>

Usage

inlineSource(options?: Object)

const { task, src, dest } = require('gulp')
const inlineSource = require('gulp-inline-source-html')

task('inlineSource', () => {
  return src('src/*.html')
    .pipe(inlineSource())
    .pipe(dest('dist'))
})

or you can

import inlineSource from 'gulp-inline-source-html'

task('inlineSource', () => {
  return src('src/*.html')
    .pipe(inlineSource({ compress: false }))
    .pipe(dest('dist'))
})

Available options include:

  • attribute: attribute used to parse sources (all tags will be parsed if set to false. Default 'inline')
  • compress: enable/disable compression of inlined content (default true)
  • fs: specify fs implementation (default is Node core 'fs')
  • handlers: specify custom handlers (default []) [see custom handlers]
  • preHandlers: specify custom pre handlers (default []) [see custom pre handlers]
  • ignore: disable inlining based on tag, type, and/or format (default [])
  • pretty: maintain leading whitespace when options.compress is false (default false)
  • rootpath: directory path used for resolving inlineable paths (default process.cwd())
  • saveRemote: enable/disable saving a local copy of remote sources (default true)
  • svgAsImage: convert <img inline src="*.svg" /> to <img> and not <svg> (default false)
  • swallowErrors: enable/disable suppression of errors (default false)

For documentation about the options-object, see popeindustries/inline-source.

License

MIT

Donate

Buy Me A Coffee