Gulp-html-import introduces external html files into html.

May 30, 2019 gulp, javascript, node.js

Project address:

gulp-html-import

When I studied PHP, I deeply felt thatincludeGrammar is very easy to use, after contactejs, found that there is a similar syntax, can easily introduce public html files; I am studying now.vue,reactAfter waiting for the framework, “componentization” is deeply rooted in my mind, and I can no longer stand the original method of repeating a large amount of code on each page. However, in the most common static html development process, I really didn’t bother to use the framework. I just wanted to write a few static pages in the most basic way. then I remembered that there was noincludeSyntax, it is unscientific to manually copy and paste the public part of each page.

In the morning, I read teacher Zhang Xinxu’s article.“What can Node.js do for JS-like Web page refactoring?”, deeply inspired, so immediately jumped up and tried to realize the content again, and try to matchgulp, make a simple and easy-to-use plug-in, similar to PHPincludeSyntax can introduce the function of static html files.

I like less grammar, so I use less-like grammar.@import 'xxx.less';As a way of introduction.

The content of the item readme is pasted directly below.

gulp-html-import

A gulp plugin which can import .html files into .html files

Usage

First, installgulp-html-importas a devDependency:

npm install gulp-html-import --save-dev

Then add it to thegulpfile.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:

<!  --  index.html -->
 
 <!  DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <title>Gulp-html-import Example</title>
 </head>
 <body>
 @import "header.html"
 <p>Hello World</p>
 @import "footer.html"
 </body>
 </html>

In yourindex.html, you should use

@import "XXX.html"

to import your components.

<!  --  header.html -->
 
 <h1>I am the header</h1>

<!  --  footer.html -->
 
 <h1>I am the footer</h1>

When you get into the root directory(where yourgulpfile.jsis) and type

gulp import

you could see a html file in/distlike this:

<!  -- /dist/index.html -->
 
 <!  DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <title>Gulp-html-import Example</title>
 </head>
 <body>
 <h1>I am the header</h1>
 <p>Hello World</p>
 <h1>I am the footer</h1>
 </body>
 </html>

Everything is OK.

API

htmlImport(string)

string

Type:String

The url of your components

MIT