這次我們介紹一個新的npm包來完成這項任務,會有更好的體驗呢;
gulp-file-include
存在的問題:
非JS語法;
循環、條件語句無法嵌套;
搭建環境
新建項目文件ejsDemo
,初始化項目文件,本地安裝gulp
、gulp-ejs
、gulp-data
:
npm init -y
npm install -D gulp gulp-ejs gulp-data
各工具包的功能:
gulp:gulp插件運行的環境;
gulp-ejs:使用ejs模板語法構建HTML的基礎;
gulp-data:引入外部數據文件的工具;
創建配置文件
gulp
的配置文件gulpfile.js
:
var gulp = require('gulp'); var ejs = require('gulp-ejs'); var data = https://segmentfault.com/a/require('gulp-data'); //gulp.task定義gulp任務; gulp.task('compile-ejs',function(){ //gulp.src定義入口文件的路徑; //ext:'.html'生成文件的後綴名 //gulp.dest定義導出文件的路徑; gulp.src('../source/**/*.ejs') .pipe(ejs({},{},{ext:'.html'})) .pipe(gulp.dest('../build/')); }); //gulp.watch監聽文件的改變,執行依賴的任務'compile-ejs'; gulp.task('watch',['compile-ejs'],function(){ gulp.watch('../source/**/*.ejs',['compile-ejs']); }); //default 任務默認執行; gulp.task('default',['watch'],function(){ console.log('編譯成功;') })
ADVERTISEMENT
gulp-ejs
的參數講解:
第一個參數:數據對象;
第二個參數:沒用過;
第三個參數:設置生成文件類型;
定義模板文件
在package.json的scripts語句中,定義命令行的快捷方式:gulp --gulpfile ./config/gulpfile.js
可以在命令行中使用npm start
來代替gulp --gulpfile ./config/gulpfile.js
;
引入內部數據
gulp.task('compile-ejs', function () { gulp.src('../source/**/*.ejs') .pipe(ejs({ title:'標題' }, {}, { ext: '.html' })) .pipe(gulp.dest('../build/')); });
ADVERTISEMENT
引入外部數據
單獨的外部數據
gulp.task('compile-ejs', function () {
gulp.src('../source/**/*.ejs')
.pipe(data(function (file) {
//直接應用數據對象中的數據;
return JSON.parse(fs.readFileSync('../source/json/global.json'));
}))
.pipe(ejs({}, {}, { ext: '.html' }))
.pipe(gulp.dest('../build/'));
});
多個外部數據
gulp.task('compile-ejs', function () { gulp.src('../source/**/*.ejs') .pipe(data(function () { // 通過home、users對象引用數據對象; return { home: JSON.parse('../source/json/home.json'), users: JSON.parse('../source/json/users.json') } })) .pipe(ejs({}, {}, { ext: '.html' })) .pipe(gulp.dest('../build/)); })
ADVERTISEMENT
Ejs語法
引入ejs模板:<%- include('filePath') %>
解析變量:<%= variableName %>
JS邏輯:<% JS邏輯 %>
JavaScript和html混合寫法,示例:
//開始標識:
<% arr.forEach(function(item){ %>
//中間寫HTML結構
<div>
<h2><%= 變量名 %></h2>
</div>
//結束標識:
<% }) %>
使用示例
Tags: 039 gulp 文件 gulp-ejs 定義 gulp-data
文章來源: