gulp-html-import，在html中引入外部html文件

Zack 发布于2019-08-19 18:32 / 920人阅读

摘要：因为喜欢语法，所以使用了类似的作为引入方式。下面直接粘贴项目的内容

项目地址：

gulp-html-import

曾经学习PHP的时候，深深觉得include语法非常好用，后接触了ejs，发现里面也有类似的语法，能够方便地引入公共html文件；在学习了vue，react等框架以后，“组件化思想”更是在我脑海根深蒂固，再也无法忍受每个页面重复大量代码的原始方法。但是，在最最普通的静态html开发过程中，我实在懒得用框架，只想用最基本的方式写几个静态页面出来，这时候才想起，没有include语法，每个页面的公共部分都要手动复制粘贴一次，实在不科学……

早上看了张鑫旭老师的文章《JS一般般的网页重构可以使用Node.js做些什么》，深受启发，于是马上蹦起床尝试着把当中内容实现一遍，并尝试着搭配gulp，制作一个简单好用的插件，实现类似PHPinclude语法能够引入静态html文件的功能。

因为喜欢less语法，所以使用了类似less的@import "xxx.less";作为引入方式。

下面直接粘贴项目readme的内容

gulp-html-import

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

Usage

First, install gulp-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 htmlImport(string) string

Type: String

The url of your components

MIT

云服务器 GPU云服务器 html中引入html html中引入css html文件引入 js中引入外部js

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/79666.html

CSS 引入方式

摘要：中引入的方式有种方式可以在中引入。嵌入方式嵌入方式指的是在头部中的标签下书写代码。示例嵌入方式的只对当前的网页有效。示例这是最常见的也是最推荐的引入的方式。导入方式导入方式指的是使用规则引入外部文件。 HTML 中引入 CSS 的方式有 4 种方式可以在 HTML 中引入 CSS。其中有 2 种方式是在 HTML 文件中直接添加 CSS 代码，另外两种是引入外部 CSS 文件。下面...

zhangke3016 2019-08-28 18:19 评论0 收藏0
把JavaScript文件放在文档的头部还是尾部

摘要：我们可以看到，百度也在头部引入了一些文件，这些文件引入的方式与的做法差不多，都在引入外部资源的标签上添加了属性，除了第一个文件没有那样做。更好阅读体验，请访问dreamapple.me 我们今天来聊一聊关于JavaScript文件的引入位置的问题；大家在平时的Web开发中有没有想过这样一个问题，那就是我应该在文档的头部（也就是标签内部里面）引入所需要的JavaScript文件还是应该...

TerryCai 2019-08-21 15:36 评论0 收藏0
python大佬养成计划----CSS样式类

摘要：与类选择器一样，选择器中可以忽略通配选择器。是唯一标识，只能被使用一次选择器标签选择器标签选择器使用类选择器选择器标签选择器设置链接的样式能够设置链接样式的属性有很多种例如等等。 CSS 概述 CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素样式通常存储在样式表中把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问...

daryl 2019-08-29 16:52 评论0 收藏0
python大佬养成计划----CSS样式类

摘要：与类选择器一样，选择器中可以忽略通配选择器。是唯一标识，只能被使用一次选择器标签选择器标签选择器使用类选择器选择器标签选择器设置链接的样式能够设置链接样式的属性有很多种例如等等。 CSS 概述 CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素样式通常存储在样式表中把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问...

Steve_Wang_ 2019-08-02 11:38 评论0 收藏0