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

发布于 2022-09-13 00:45:20 字数 891 浏览 30 评论 0

已经搜索很久了，没找到来问问。
用的是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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

请远离我 2022-09-20 00:45:20

假设生成一个 html 的流程用 gulp 可以实现.

那么写条命令循环执行 gulp 命令多次就可以了

回复收藏 0

迷你仙 2022-09-20 00:45:20

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>

回复收藏 0

再见回来 2022-09-20 00:45:20

我想，你期望的是利用根据一个json和模板html，生成一系列的静态html页面吧，这个功能其实有很多办法实现。甚至都不一定用gulp，可以理解为单独有一个nodejs或者其它方法操作文件的命令，然后在gulp中调用（我想，既然是静态文件，其实生成一次就够了吧，不需要频繁的调用生成，可以利用一些标志注明是否已经生成过。）

回复收藏 0

~没有更多了~