gulp-html-imports
v1.0.6
Published
A gulp plugin which can import html files, and restore html files.
Downloads
20
Maintainers
yijian002Readme
gulp-html-imports
- A gulp plugin.
- Import html files into html files.
- Restore html files.
Install
$ npm install gulp-html-imports --save-devUsage
gulpfile.js:
var htmlImport = require('gulp-html-imports')Simple
gulp.task('html_imports', function () {
gulp.src('./index.html')
.pipe(htmlImport('./components/'))
.pipe(gulp.dest('dist'))
})
Option "template": Replace html contents
gulp.task('html_imports', function () {
gulp.src('./index.html')
.pipe(htmlImport({
componentsPath: './components/',
template: {
'_VERSION_': '2018'
}
}))
.pipe(gulp.dest('dist'))
})
// If you want to restore the html
gulp.task('html_restore', function () {
gulp.src('dist/index.html')
.pipe(htmlImport({
componentsPath: './components/',
restore: true
}))
.pipe(gulp.dest('./'))
})Example
index.html
<html>
<body>
<div>HTML import HTML</div>
<!-- @import "demo.html" -->
</body>
</html>./components/demo.html
<div>This is demo.html.</div>
<div>Version is _VERSION_</div> $ gulp html_imports dist/index.html
<html>
<body>
<div>HTML import HTML</div>
<!-- import "demo.html" -->
<div>This is demo.html.</div>
<div>Version is 2018</div>
<!-- import end -->
</body>
</html> $ gulp html_restoreindex.html
<html>
<body>
<div>HTML import HTML</div>
<!-- @import "demo.html" -->
</body>
</html>Options
| Name | Type | Default | Description |
| ---------------- | ------- | --------------- | ------------------------------------------ |
| componentsPath | String | './components/' | Components html file path. |
| template | Object | null | Replace components html's content keyword. |
| restore | Boolean | false | Restore html initial content. |
| nestedIncludes | Boolean | false | Replace include html's content. |
Copyright © 2018 Vic Yang