@habui-epi/gulp-inline
v0.0.6
Published
Inline styles and scripts into an html file.
Downloads
9
Maintainers
Readme
gulp-inline
Information
Usage
var inline = require('gulp-inline')
, uglify = require('gulp-uglify')
, minifyCss = require('gulp-minify-css')
, autoprefixer = require('gulp-autoprefixer');
gulp.src('public/index.html')
.pipe(inline({
base: 'public/',
js: uglify,
css: [minifyCss, autoprefixer({ browsers:['last 2 versions'] })],
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 withsrc
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)
How to set options for uglify when used as plugin
Below is an example of how to pass options to uglify. In this case we tell uglify to not mangle function names.
var inline = require('gulp-inline')
, uglify = require('gulp-uglify');
gulp.src('public/index.html')
.pipe(inline({
base: 'public/',
js: function() {
return uglify({
mangle: false
});
}
}))
.pipe(gulp.dest('dist/'));