| FazBrowse GitHub Viewer | Trending | | Home |
| Tools: [Download Repo ZIP] [Original HTTPS Page] |
| Name | Name | Last commit date | ||
|---|---|---|---|---|
| Package | gulp-inline |
| Description | Inlines js/css/svg into your html files |
| Node Version | = 0.10 |
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.
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>
Plugin options:
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/'));| Back | FazBrowse Home | New Git URL |