国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

Zack / 925人閱讀

摘要：因?yàn)橄矚g語(yǔ)法，所以使用了類似的作為引入方式。下面直接粘貼項(xiàng)目的內(nèi)容

項(xiàng)目地址：

gulp-html-import

曾經(jīng)學(xué)習(xí)PHP的時(shí)候，深深覺(jué)得include語(yǔ)法非常好用，后接觸了ejs，發(fā)現(xiàn)里面也有類似的語(yǔ)法，能夠方便地引入公共html文件；在學(xué)習(xí)了vue，react等框架以后，“組件化思想”更是在我腦海根深蒂固，再也無(wú)法忍受每個(gè)頁(yè)面重復(fù)大量代碼的原始方法。但是，在最最普通的靜態(tài)html開(kāi)發(fā)過(guò)程中，我實(shí)在懶得用框架，只想用最基本的方式寫(xiě)幾個(gè)靜態(tài)頁(yè)面出來(lái)，這時(shí)候才想起，沒(méi)有include語(yǔ)法，每個(gè)頁(yè)面的公共部分都要手動(dòng)復(fù)制粘貼一次，實(shí)在不科學(xué)……

早上看了張?chǎng)涡窭蠋煹奈恼隆禞S一般般的網(wǎng)頁(yè)重構(gòu)可以使用Node.js做些什么》，深受啟發(fā)，于是馬上蹦起床嘗試著把當(dāng)中內(nèi)容實(shí)現(xiàn)一遍，并嘗試著搭配gulp，制作一個(gè)簡(jiǎn)單好用的插件，實(shí)現(xiàn)類似PHPinclude語(yǔ)法能夠引入靜態(tài)html文件的功能。

因?yàn)橄矚gless語(yǔ)法，所以使用了類似less的@import "xxx.less";作為引入方式。

下面直接粘貼項(xiàng)目readme的內(nèi)容

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

Copyright ? 2016 Jrain Lau

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/79666.html

相關(guān)文章

  • CSS 引入方式

    摘要：中引入的方式有種方式可以在中引入。嵌入方式嵌入方式指的是在頭部中的標(biāo)簽下書(shū)寫(xiě)代碼。示例嵌入方式的只對(duì)當(dāng)前的網(wǎng)頁(yè)有效。示例這是最常見(jiàn)的也是最推薦的引入的方式。導(dǎo)入方式導(dǎo)入方式指的是使用規(guī)則引入外部文件。 HTML 中引入 CSS 的方式 有 4 種方式可以在 HTML 中引入 CSS。其中有 2 種方式是在 HTML 文件中直接添加 CSS 代碼，另外兩種是引入 外部 CSS 文件。下面...

    zhangke3016 評(píng)論0 收藏0

  • 把JavaScript文件放在文檔的頭部還是尾部

    摘要：我們可以看到，百度也在頭部引入了一些文件，這些文件引入的方式與的做法差不多，都在引入外部資源的標(biāo)簽上添加了屬性，除了第一個(gè)文件沒(méi)有那樣做。 更好閱讀體驗(yàn)，請(qǐng)?jiān)L問(wèn)dreamapple.me 我們今天來(lái)聊一聊關(guān)于JavaScript文件的引入位置的問(wèn)題；大家在平時(shí)的Web開(kāi)發(fā)中有沒(méi)有想過(guò)這樣一個(gè)問(wèn)題，那就是我應(yīng)該在文檔的頭部（也就是標(biāo)簽內(nèi)部里面）引入所需要的JavaScript文件還是應(yīng)該...

    TerryCai 評(píng)論0 收藏0

  • python大佬養(yǎng)成計(jì)劃----CSS樣式類

    摘要：與類選擇器一樣，選擇器中可以忽略通配選擇器。是唯一標(biāo)識(shí)，只能被使用一次選擇器標(biāo)簽選擇器標(biāo)簽選擇器使用類選擇器選擇器標(biāo)簽選擇器設(shè)置鏈接的樣式能夠設(shè)置鏈接樣式的屬性有很多種例如等等。 CSS 概述 CSS 指層疊樣式表 (Cascading Style Sheets) 樣式定義如何顯示 HTML 元素 樣式通常存儲(chǔ)在樣式表中 把樣式添加到 HTML 4.0 中，是為了解決內(nèi)容與表現(xiàn)分離的問(wèn)...

    daryl 評(píng)論0 收藏0

  • python大佬養(yǎng)成計(jì)劃----CSS樣式類

    摘要：與類選擇器一樣，選擇器中可以忽略通配選擇器。是唯一標(biāo)識(shí)，只能被使用一次選擇器標(biāo)簽選擇器標(biāo)簽選擇器使用類選擇器選擇器標(biāo)簽選擇器設(shè)置鏈接的樣式能夠設(shè)置鏈接樣式的屬性有很多種例如等等。 CSS 概述 CSS 指層疊樣式表 (Cascading Style Sheets) 樣式定義如何顯示 HTML 元素 樣式通常存儲(chǔ)在樣式表中 把樣式添加到 HTML 4.0 中，是為了解決內(nèi)容與表現(xiàn)分離的問(wèn)...

    Steve_Wang_ 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<