gulp中能否根据一个html模板文件生成多个html文件

已经搜索很久了，没找到来问问。
用的是gulp

有没有个插件，可以实现如下
根据一个html文件，和一个json文件，批量生成一些有规律的html文件，省的建立一堆重复的模板。
也便于维护。

上面是个想法，就是找不到类似的东西。

解决方式

const {src, dest, lastRun, watch, series, parallel} = require('gulp')
const fileInclude = require('gulp-file-include')
const rename = require('gulp-rename')

const {fileName} = require('./src/pages/loop/name.json')

const include = newName => {
    return src('./src/pages/**/*.html')
        .pipe(fileInclude({
            indent: true,
            prefix: '@@',
            basepath: './src/partials',
        }))
        .pipe(rename({
            basename: newName
        }))
        .pipe(dest('./dist/'))
}

const loopInclude = done => {
    for (let i = 0, x = fileName.length; i < x; i++) {
        include(fileName[i])
    }
    done()
}

exports.testInclude = loopInclude

阅读 4k

gulp就是一个打包工具，本身也是支持一些模板工具，如ejs等。

const ejs = require('gulp-ejs')
const rename = require('gulp-rename')
 
gulp.src('./templates/*.ejs')
  .pipe(ejs({ title: 'gulp-ejs' })) // 注入变量
  .pipe(rename({ extname: '.html' }))
  .pipe(gulp.dest('./dist'))

另外如不想使用这种ejs模板的方式，使用gulp-token-replace插件也是可以的，使用方式如下：

// gulp.js
var replace = require('gulp-token-replace');
 
gulp.task('token-replace', function(){
  var config = require('./configuration/config.json');
  return gulp.src(['src/*.js', 'src/*.html'])
    .pipe(replace({global:config}))
    .pipe(gulp.dest('dist/'))
});

// html
<!--{{tokens.Copyrights}}-->
<!--canvasSize:{{tokens.size}}-->
<!DOCTYPE html>
<html lang="en">
<head><title>{{main.title}}</title>
    <meta http-equiv="X-UA-Compatible" content="IE=9">
    <meta charset="UTF-8">
    <script src="{{tokens.RMLibs}}"></script> 
    <script src="swipe.min.js"></script> 
    <link rel="stylesheet" href="{{main.name}}.css">
    <script src="{{main.name}}.debug.js"></script> 
</head>
<body>
<div id="content"></div>
<div id="debug"></div>
</body>
</html>

gulp中能否根据一个html模板文件生成多个html文件

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

纯css如何绘制一个无背景色有边框色，带有文字的倒等腰梯形？

请问zustand的slice里面的属性，如何配置TypeScript类型约束？

请问nodejs如何定义全局变量？

gulp中能否根据一个html模板文件生成多个html文件

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

纯css如何绘制一个无背景色有边框色，带有文字的倒等腰梯形？

请问zustand的slice里面的属性，如何配置TypeScript类型约束？

请问nodejs如何定义全局 变量？

请问nodejs如何定义全局变量？