<del id="mwki0"></del>

<cite id="mwki0"></cite>

<fieldset id="mwki0"></fieldset>

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

Zack 發布于2019-08-19 18:32 / 917人閱讀

摘要：因為喜歡語法，所以使用了類似的作為引入方式。下面直接粘貼項目的內容

項目地址：

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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