gulp-inline

gulp-inline
===========

Information


Usage

``javascript
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:

- element with src attribute:

`

`

which will be converted to something like

`



etc.

`

depending on what /assets/icon.svg contains

- element with child element:

`



`

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

This is valid target SVG for the example above:

`

...

`

while this is invalid:

`

...

`

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)

$3

Below is an example of how to pass options to uglify. In this case we tell uglify to not mangle function names.

`javascript
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/'));
``