gulp-ejs 如何通過外部 json 檔案傳值
最近一個 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'));
})
})
相關文章
- PHP如何通過CURL上傳檔案PHP
- Qt通過Http上傳檔案(路過)QTHTTP
- 通過配置檔案(.htaccess)實現檔案上傳
- 3285.如何通過連結移動外部檔案到空間(步驟)
- jftp通過sftp協議上傳檔案FTP協議
- Windows 機器通過 FTP 上傳檔案WindowsFTP
- 在php中通過curl上傳檔案PHP
- php通過ftp協議上傳檔案PHPFTP協議
- linux下遠端傳送檔案命令,通過ssh協議傳輸檔案Linux協議
- 通過SQL SERVER遠端上傳檔案的實現SQLServer
- vue+axio通過獲取dom元素上傳檔案Vue
- 有用的javascript外部檔案或其他外部檔案引用JavaScript
- iOS開發之通過代理逆向傳值iOS
- 通過反射獲取上傳檔案方法引數中的檔名反射
- 如何透過Python將JSON格式檔案匯入redis?PythonJSONRedis
- 通過RMAN-transport獲取傳輸表空間檔案
- 通過中轉機及ssh rsync 傳輸歸檔檔案進行同步
- 如何通過trn日誌檔案恢復SQL ServerSQLServer
- 通過trace檔案重新建立控制檔案
- springCloud 微服務通過minio實現檔案上傳和檔案下載介面SpringGCCloud微服務
- Android 傳送HTTP GET POST 請求以及通過 MultipartEntityBuilder 上傳檔案(二)AndroidHTTPUI
- git上傳過濾檔案Git
- SpringMVC 通過commons-fileupload實現檔案上傳SpringMVC
- SpringCloud 通過feign檔案傳輸並打zip包下載SpringGCCloud
- 通過SQL Server對上傳檔案內容進行查詢SQLServer
- 如何前端上傳檔案前端
- json前後臺傳值薦JSON
- 如何實現通過Samba訪問超過2G的檔案?Samba
- 如何將超大檔案傳輸給別人,超大檔案如何傳輸呢?
- 如何通過UGC傳播網路口碑GC
- 如何透過ForkJoinPool和HikariCP將大型JSON檔案批次處理到MySQL?JSONMySql
- Asp.net WebApi 傳遞json資料以及上傳檔案ASP.NETWebAPIJSON
- 前端通過 post 下載檔案前端
- 通過SQL查詢UDUMP檔案SQL
- Windows通過hosts檔案解析域名Windows
- 通過idl得到.h檔案
- .Net Core 通過配置檔案(appsetting.json)修改Kestrel啟動埠APPJSON
- JSON檔案JSON