1. 程式人生 > >gulp-file-include構建公用頭部尾部

gulp-file-include構建公用頭部尾部

如果靜態檔案都包含了公用的頭部和尾部

一個個改的話太浪費時間啦。

gulp-file-include可以讓我們把公用的檔案都放在header.html和footer.html

然後再構建,如果需要改頭部尾部的話只需要改一個檔案就好。

這裡寫圖片描述

  • page資料夾裡面包含include資料夾和若干html靜態檔案:

這裡寫圖片描述

  • include資料夾裡放著公用的頭部和尾部:(如果需要改尾部資訊只需要改這個地方)

這裡寫圖片描述

gulp-file-include文件 :檢視

gulpfile.js:

var gulp = require('gulp');
var fileinclude = require
('gulp-file-include'); gulp.task('fileinclude', function() { // 適配page中所有資料夾下的所有html,排除page下的include資料夾中html gulp.src(['page/**/*.html', '!page/include/**.html']) .pipe(fileinclude({ prefix: '@@', basepath: '@file' })) .pipe(gulp.dest('dist')); });