這次我們介紹一個新的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('編譯成功;')
})
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/'));
});
引入外部數據
單獨的外部數據
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/));
})
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
文章來源: