参考： Gulp gulp-file-include gulp实现公共html代码复用

Gulp 快速入门

https://www.gulpjs.com.cn/docs/getting-started/quick-start/

gulp-file-include快速入门

Installation

  1. npm install --save-dev gulp-file-include

package.json

  1. {
  2.   "name": "gulp-project",
  3.   "version": "1.0.0",
  4.   "description": "",
  5.   "main": "index.js",
  6.   "scripts": {
  7.     "test": "echo \"Error: no test specified\" && exit 1",
  8.     "build": "npx gulp fileinclude"
  9.   },
  10.   "author": "koubs",
  11.   "license": "ISC",
  12.   "devDependencies": {
  13.     "gulp": "^4.0.2",
  14.     "gulp-file-include": "^2.2.2"
  15.   }
  16. }

Example

目录结构

project

  • dist
  • node_modules
  • src
    • include
    • page
  • gulpfile.js
  • package.json

复用代码

在include文件夹内添加三个文件，这些文件内包含每个页面复用的部分

footer.html

  1. <meta charset="UTF-8">
  2. <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4. <title>测试文件引入</title>
  5. <meta name="keywords" content="aa,bb,cc,dd,ee,ff">
  6. <meta name="description" content="1234567890">
  7. <link rel="icon" sizes="any" mask="" href="" />
  8. <link rel="stylesheet" type="text/css" href="/dist/css/common.css" />
  9. <meta name="format-detection " content="telephone=no">

nav.html

  1. <div>
  2.     <button><a href="/index.html">@@home</a></button>
  3.     <button><a href="/trade-news.html">@@news</a></button>
  4.     <button><a href="/product.html">@@product</a></button>
  5.     <button><a href="/contact.html">@@contact</a></button>
  6. </div>

footer.html

  1. <div>这是footer部分</div>

引入代码

在page目录添加文件

project.html

  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4.     @@include('../include/meta.html')
  5. </head>
  6. <body>
  7. @@include('../include/nav.html',{
  8.     "home": "主页",
  9.     "news": "行业新闻",
  10.     "product": "公司产品",
  11.     "contact": "联系我们"
  12. })
  13. <div>公司产品页</div>
  14. @@include('../include/footer.html')
  15. </body>
  16. </html>

配置文件

  1. var fileinclude = require('gulp-file-include');
  2. var gulp = require('gulp');
  4. gulp.task('fileinclude', function (done) {
  5.     gulp.src('src/page/**/*.html')
  6.         .pipe(fileinclude({
  7.             prefix: '@@',
  8.             basepath: '@file'
  9.         }))
  10.         .pipe(gulp.dest('dist'))
  11.         done()
  12. });

运行命令

  1. npm run build

输出文件

dist/project.html

  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4.     <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />
  6. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  7. <title>测试文件引入</title>
  8. <meta name="keywords" content="aa,bb,cc,dd,ee,ff">
  9. <meta name="description" content="1234567890">
  10. <link rel="icon" sizes="any" mask="" href="" />
  11. <link rel="stylesheet" type="text/css" href="/dist/css/common.css" />
  12. <meta name="format-detection " content="telephone=no">
  13. </head>
  14. <body>
  15. <div>
  16.     <button><a href="/index.html">主页</a></button>
  17.     <button><a href="/trade-news.html">行业新闻</a></button>
  18.     <button><a href="/product.html">公司产品</a></button>
  19.     <button><a href="/contact.html">联系我们</a></button>
  20. </div>
  21. <div>公司产品页</div>
  22. <div>这是footer部分</div>
  23. </body>
  24. </html>