Skip to content

lee-chase/gulp-inline

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

95 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

gulp-inline

Information

Packagegulp-inline
DescriptionInlines js/css/svg into your html files
Node Version= 0.10

Usage

var inline = require('gulp-inline')
  , uglify = require('gulp-uglify')
  , minifyCss = require('gulp-minify-css');

gulp.src('public/index.html')
  .pipe(inline({
    base: 'public/',
    js: uglify,
    css: minifyCss,
    disabledTypes: ['svg', 'img', 'js'], // Only inline css files
    ignore: ['./css/do-not-inline-me.css']
  }))
  .pipe(gulp.dest('dist/'));

Replaces your <script> and <link> tags with the corresponding inlined files.

SVG support

Currently there are two supported methods:

  • <img> element with src attribute:

    <img src="/assets/icon.svg" class="MyClass" />
    

    which will be converted to something like

    <svg xmlns="http://www.w3.org/2000/svg" viewbox="..." class="MyClass">
      <circle ... />
      <path ... />
      etc.
    </svg>
    

    depending on what /assets/icon.svg contains

  • <svg> element with <use> child element:

    <svg>
      <use xlink:href="/assets/icon.svg#MyIdentifier"></use>
    </svg>
    

    Note that this method requires an ID matching the ID of target SVG root element.

    This is valid target SVG for the example above:

    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" id="MyIdentifier">
      ...
    </svg>
    

    while this is invalid:

    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
      ...
    </svg>
    

Options

Plugin options:

  • base - the root directory containing the files to be inlined
  • css - css transform (gulp plugin)
  • js - js transform (gulp plugin)
  • svg - svg transform (gulp plugin)
  • ignore - array of file paths to ignore and not inline (file paths as they appear in the source)
  • disabledTypes - array of types not to run inlining operations on (css, svg, js, img)

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 100.0%