美文网首页
gulp-ejs 如何通过外部 json 文件传值

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

作者: 杨晓晨 | 来源:发表于2017-10-22 10:20 被阅读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'));
            })
    })
    

    相关文章

      网友评论

          本文标题:gulp-ejs 如何通过外部 json 文件传值

          本文链接:https://www.haomeiwen.com/subject/zmlguxtx.html