grunt 怎樣合併 html ？

01-14

問題場景：在寫一個門戶站前端時，有三十多個頁面，header和footer部分是一樣的；寫了二十多個頁面的時候（header和footer都是複製第一個的），header和footer的html和css做了一些修改，其中css還好說，在css文件中改一次就夠了，可是html，我整整改了二十多次；
所有我想如果有什麼插件可以讓header footer與各頁面的主體html分離，就可以避免這種悲劇了；
好像有很多前端都在用grunt了，可是搜了好長時間也沒找到grunt合併html相關的文章；您們都沒遇到過這種情況嗎？您們是通過grunt插件完成還是通過別的方法解決了？

謝邀。

grunt已經有些過時，我建議使用gulp。

項目的地址：lmtdit/demo-builder

這是一個靜態html模塊化構建方案，是我給我們公司的前端實習生或主要干切圖的前端所寫的一個簡化版本前端模塊化方案，主要解決沒有服務端語言支持的情況下，靜態html的模塊抽象問題。

這個構建工具提供了一份demo，參考著就應該知道怎麼使用了，有問題可以在github上或知乎這裡給我留言。這個構建工具沒有包含js的模塊化構建方案在裡面，但包含了靜態資源定位功能，css、js和img的資源定位map就是使用遞歸。主要功能：

1 基於靜態html的demo模塊化構建方案，支持內嵌圖片資源的定位功能（支持不同環境下的img資源定位，帶MD5戳）

2 基於LESS的CSS模塊化構建方案（暫未包含雪碧圖的自動構建功能在內）

3 靜態CSS和JS的優化壓縮，支持內嵌圖片資源的定位功能，（同上）

4 開發狀態下的watch即時編譯功能，同一份源文件連續按ctrl+s保存，3秒內視為一次保存，開發體驗良好

5 一個靜態開發的web伺服器，支持文件變化自動刷新（默認沒開啟，自己找開關）

使用方法：

主要參考我提供的Demo，它只有1級目錄，但實際上js、css和img均支持多級目錄。如果要在項目使用中，需要注意區分源代碼和生產代碼，只要源代碼不衝突，構建出來的文件衝突可忽視。

工具的安裝和使用，先參考我提供的Readme.md文件。

-----------------

下面是我最新補充的。

整體的構建流程：

html構建的使用說明：

靜態的模板語法：

//1，@@include包含子模板，子模板為相對路徑，可以傳參 //2，參數通過 @@ 來實例，當參數名字為css或js時，可以替換為html的路徑引用 //3，html內嵌img可通過{{staticPath}}來輸出路徑引用，當然也可以直接相對路徑 //4，在非開發狀態下，html包含的 img、css和js可轉化為帶有md5戳的路徑引用 //5，發布到CDN解決緩存和覆蓋式發布問題，但這需結合後端模板，靜態開發不需要


//這是主模板的內容--&>

@@include("./_common/head.html",{

        "title":"後台管理",

        "css":"pintuer.css,admin.css"

    })

@@include("./_common/footer.html",{

     "js":"jquery.js,pintuer.js,respond.js,admin.js"

})

//這是子模板的內容--&> &@@title& & @@css & & &

LESS編譯為CSS的說明：

靜態html模塊化開發的建議：

1，less和html源文件儘可能碎片化；

2，less和html的模塊最好一一對應。

如果你無法理解這兩點建議，不要緊，先試試，然後再自己品味。-----------------

補充：

這個只是一個簡單的前端構建工具，但已經包含了我對於前端工程化解決方案的基本思路，如果你有興趣就自己研究和加工。當然，我肯定有完整的前端工程解決方案，但只是適合我所負責的項目。

最近，我基於過往的電商項目特點，開發針對垂直電商領域的前端工程構建開發框架，具備一定的通用性版本，預計10月底發布到github，並支持npm安裝和部署。有興趣的就關注一下我的github。

簡單的做法就是把你的 header 和 footer 抽出來，在 html 中通過佔位符的方式引入，然後自己寫個自定義的 task 去插入。

例如，header.html 的路徑是：/common/header.html，你的其中一個頁面可能這樣引入 header 文件：

& & & &A& & & & & &

然後自己寫一個 grunt task 來打包 html 文件，把 html 文件中的 & 替換成對應的文件內容，下面是偽代碼：

grunt.registerTask("htmlpack", function(){ var dir = xxxx; //源文件的路徑 var destDir = xxxx; //要保存的路徑


    // 讀取源文件

    fs.readDir(dir, function(filename){

        var file = fs.readFile(filename);

        var include = file.match(/&/);
        // 替換內容

        include.forEach(function (item) {

            var src = item.replace("&", "");

            var html = fs.readFile(src);

            file.replace(item, html);

        })；

// 輸出文件 fs.writeFile(destDir+filename, file); }) })

gulp jade

front-end-separate(前後端分離腳手架)

front-end-separate

一個前後端分離的腳手架工具（自主研發）

為什麼選擇grunt而不是gulp

如果你也和我一樣喜歡grunt這種配置的方式，那麼我相信這個腳手架覺對十分適合你

所有靜態資源都md5全並壓縮打包,css,js,img,html

已在生產環境驗證

基於express和grunt的前後端分離框架

模板引擎使用的是nunjucks，好處是可以實現模版繼承，又不像jade一樣把html標籤都簡化了

express提供路由服務

項目中app為原代碼文件（開發用），dist為打包後的文件（用於線上）

開發使用app，線上使用dist，支持一鍵cdn部署，加速你的項目

項目啟動時，修改任何express代碼，可以實現自動重啟–基於nodemon

支持sass圖片精靈（自動打包精靈圖片，再也不用手動去拼湊了）

基於grunt md5 打包合併

線上輸出的html已經壓縮成一行（讓你的代碼更有Geeker范）

###怎麼使用:

clone 代碼

啟動命令行:

如果沒有安裝grunt，請先全局安裝grunt bash $ npm i grunt-cli -g 安裝npm包(可能需要一段時間，請耐心等待)

$ npm i

開發模式(可以打開瀏覽器localhost:3001開始開發，埠配置文件里可以更改)

$ grunt

打包

$ grunt build

打包成CDN模式(config/config.js中可配置cdn路徑)

$ grunt buildCdn

browserSync(可以實現更改靜態資源自動刷新了)

$ grunt serve

瀏覽器輸入localhost:3001,你就可以看到漂亮的頁面了

打包命令 grunt build 會生成dist文件夾，裡面可以看到js、css都加了md5綴

tip:scss推薦用Webstorm自帶的File watch功能，非常方便（安裝node-sass即可）

-關於圖片精靈

$ grunt sprite 執行即可得到精靈圖片，如需配置請去config/grunt/sprite.js下配置更多的圖片精靈

在scss中引用@import 「sprite」樣式中寫如:@include sprite($index_bg); 即可使用;

如果大家喜歡的話，請點一下star此項目或follow一下本人，即是對本人最大的支持

我會繼續完善這個項目的，並一直維護下去，如果有任何問題，歡迎在issues裡面提出

感謝大家支持!

——Nobody

推薦一個比較簡單容易使用的，但不一定是最好的，請自行判斷，原理都是查找替換，grunt-include-replace

簡單示例（注意：兩個文件在同一目錄下）：

index.html

& & & &demo& & & Hello, @@include("./test.html", {"name": "World"}) & &

test.html

&@@name&

Result:

& & & &demo& & & Hello, &World& & &

其實模板最好通過後端來處理，如果不涉及太重的 js 的話， angluarjs, vue, handlerbars 都可以實現; 不過 Glup 確實比 Grunt 簡單易用一些~

推薦posthtml,類似postcss的html處理器，有一個插件posthtml-include,直接上github搜一下看一下demo，5分鐘就會了，配合上gulp使用起來很方便。

把html用模板語言來寫，比如jade之類的

ejs