gulp-ejs 如何通过外部 json 文件传值

2017-10-22  本文已影响0人  杨晓晨

最近一个 node 项目里有这样的场景,为了前后端统一,前端开发的时候使用 ejs 模板开发,使用 gulp 进行打包,使用 gulp-ejs 传值一些预览数据再进行 gulp 打包,这样前端打包后就能看到相应的预览 html 文件,后端就可以直接将 ejs 文件作为 view 模版直接进行使用。但是 ejs 传值的时候有个限制,如下

var ejs = require('gulp-ejs')
var gutil = require('gulp-util')

gulp.src('./templates/*.ejs')
    .pipe(ejs({
        msg: 'Hello Gulp!'
    }).on('error', gutil.log))
    .pipe(gulp.dest('./dist'))

但是这样存在一个限制,要么传入所有的 ejs 文件,所有的的值都传入,要么一个个 ejs 都导入,可以传入单个文件的值,但是哪种方法都无可避免带来很不优雅的代码,文件冗余,经过查看源码给出一种解决方案。可以遍历 views 下所有的 ejs 文件,根据 ejs 文件的文件名作为索引,在外部建立一个 json 文件,根据 ejs 文件名查找对应的 value,赋值给 gulp-ejs 去渲染。以下是实现方法。

gulp.task('ejsCompile', function () {

    fs.readdirSync(__dirname + "/src/app")//遍历文件
        .filter(function (file) {
            return (file.indexOf("_") !== 0) && (file.endsWith('.ejs'));//过滤以_开头和不是ejs文件
        })
        .forEach(function (file) {
            console.log(file)
            let name = file.substring(0, file.length - 4)
            let value;
            if(cfg.hasOwnProperty(name)){//cfg 为 存放数据的配置文件
                value = cfg[name];
            } else {
                value = {}
            }
            console.log(name)
            console.log(value)
            gulp.src('src/app/' + file)
                .pipe(ejs(value))//传入值进行渲染
                .pipe(rename(function(path){
                    path.extname = ".html";
                }))
                .on('error',gutil.log)
                .pipe(gulp.dest('dist/app'));
        })
})
上一篇下一篇

猜你喜欢

热点阅读