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

小小的PHP能干啥
  • 181

已经搜索很久了,没找到来问问。
用的是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
回复
阅读 943
3 个回答

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

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

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>

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏