gulp-ejs官网上有如此使用示例:
javascript
var ejs = require("gulp-ejs"); gulp.src("./templates/*.ejs") .pipe(ejs({ msg: "Hello Gulp!" })) .pipe(gulp.dest("./dist"));
会得到如此效果:
html
<!-- input: --> <div><%= msg %></div> <!-- output: --> <div>Hello Gulp!</div>
出于某种需要,我把需要的ejs参数(data)放在了一个外部文件中:
json
// config.json { "content_includes":{ "title":"Hello" } }
html
<!-- content_includes.ejs --> <h1><%= title %></h1>
javascript
// gulpfile.js var gulp = require('gulp'); var gutil = require('gulp-util'); var ejs = require('gulp-ejs'); var rename = require('gulp-rename'); var path = require('path'); var cfg = require('./config.json'); var tmp = {} gulp.task('compile',function() { gulp.src("./html/**/[^_]*.ejs") .pipe(rename(function(path){ var basename = path.basename; // 判断相应的key是否存在 if(cfg.hasOwnProperty(basename)){ // 若存在则缓存这个key的value,即需要传给ejs的参数 tmp = cfg[basename]; }else{ tmp = {}; } })) .pipe(ejs(tmp)) .on('error',gutil.log) .pipe(rename(function(path){ path.extname = ".html"; })) .pipe(gulp.dest('./dest')); });
结果,提示参数未传入:
title is not defined
请问应该怎么做?
tmp = cfg[basename];
改成
for (var a in cfg[basename]) {
tmp[a] = cfg[basename][a];
}
类似这种形式。
因为在.pipe(ejs(tmp))
这里,
已经事先取到了声明tmpvar tmp = {}
时引用的Object,
所以再对tmp直接赋值也改变不了ejs引用的tmp。
用gulp-data试试
var data = require('gulp-data');
var getJsonData = function(file) {
return require('./examples/' + path.basename(file.path) + '.json');
};
gulp.task('taskname',function(){
return gulp.src()
.pipe(data(getJsonData))
.pipe(gulp.dest('./dest'));
});