Inline and compress tags that contain the inline attribute. Supports <script>, <link>, and <img> (including *.svg sources) tags by default, and is easily extensible to handle others.
- Write Polymer elements with ES2015
- Run gulp
- ???????
- PROFIT
inline(htmlpath, [options], callback(err, html)): asynchronously parse htmlpath content for tags containing an inline attribute, and replace with (optionally compressed) file contents.
htmlpath can be either a filepath or a string of html content.
Available options include:
attribute: attribute used to parse sources (defaultinline)compress: enable/disable compression of inlined content (defaulttrue)es5: enable/disable traceur converter (defaultfalse)handlers: specify custom handlers (default[]) [see custom handlers]ignore: disable inlining based ontag,type, and/orformat(default[])pretty: maintain leading whitespace whenoptions.compressisfalse(defaultfalse)rootpath: directory path used for resolving inlineable paths (defaultprocess.cwd())swallowErrors: enable/disable suppression of errors (defaultfalse)svgAsImage: convert<img inline src="*.svg" />to<img>and not<svg>(defaultfalse)
$ npm install https://github.com/BIFIT/inline-source.git<!-- located at project/src/html/index.html -->
<!DOCTYPE html>
<html>
<head>
<!-- set here webcomponents.js -->
</head>
<body>
<polymer-component></polymer-component>
<script inline src="./polymer-component.js"></script>
</body>
</html>// polymer-component.js
Polymer({
is: 'polymer-component'
});Output:
<html>
<head>
<polymer-component></polymer-component>
<script>Polymer({is:'polymer-component'});</script>
</head>
<body>
</body>
</html>npm install https://github.com/BIFIT/inline-source.git
var gulp = require('gulp');
var inlinesource = require('gulp-inline-source');
gulp.task('inlinepolymer', function () {
return gulp.src([
'app/elements/polymer-component/polymer-component.html'
], {base: './'})
.pipe(inlinesource({compress: true, es5: true}))
.pipe(gulp.dest('.'))
});