A gulp plugin which can import .html files into .html files
npm install gulp-html-importgulp-html-import as a devDependency:
npm install gulp-html-import --save-dev
`
Then add it to the gulpfile.js:
`
var htmlImport = require('gulp-html-import');
gulp.task('import', function () {
gulp.src('./demo/index.html')
.pipe(gulpImport('./demo/components/'))
.pipe(gulp.dest('dist'));
})
`
Example
Here is the files tree:
`
|
-- demo
| |
| -- components
| | |
| | -- header.html
| | |
| | -- footer.html
| |
| -- index.html
|
-- gulpfile.js
`
Html files:
`
Gulp-html-import Example
@import "header.html"
Hello World
@import "footer.html"
`
In your index.html, you should use
`
@import "XXX.html"
`
to import your components.
`
I am the header
`
`
I am the footer
`
When you get into the root directory(where your gulpfile.js is) and type
`
gulp import
`
you could see a html file in /dist like this:
`
Gulp-html-import Example
I am the header
Hello World
I am the footer
`
Everything is OK.
API
$3
#### string
Type: String`