gulp-ejs 如何通過外部 json 檔案傳值

weixin_34292287發表於2017-10-22

最近一個 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'));
        })
})

相關文章