Detalhes do pacote

gulp-html-imports

yijian00216MIT1.0.6

A gulp plugin which can import html files, and restore html files.

gulp, gulpplugin, html, through2

readme (leia-me)

gulp-html-imports

  • A gulp plugin.
  • Import html files into html files.
  • Restore html files.

Install

 $ npm install gulp-html-imports --save-dev

Usage

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_restore

index.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.

MIT

Copyright © 2018 Vic Yang