HTML的復用

這次我們介紹一個新的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>
//結束標識：
<% }) %>

使用示例

文章來源：