[英]How to include partial html file into another html file using gulp?
I have two folders, dist
and partials
, the 'dist' folder contains the index.html file and the 'partials' folder contains header.html, navbar.html, and footer.html files. I have two folders,
dist
and partials
, the 'dist' folder contains the index.html file and the 'partials' folder contains header.html, navbar.html, and footer.html files. I want to include these partial files into index.html.我想将这些部分文件包含到 index.html 中。 I tried the gulp-file-include plugin, It works fine but I want that whenever I perform any changes into any partial file, The index.html file should be updated.
我尝试了 gulp-file-include 插件,它工作正常,但我希望每当我对任何部分文件执行任何更改时,都应该更新 index.html 文件。 I'm not able to do this with the gulp-file-include plugin, Please any other solution...?
我无法使用 gulp-file-include 插件执行此操作,请提供任何其他解决方案...?
gulpfile.js gulpfile.js
'use strict'
const fileinclude = require('gulp-file-include');
const gulp = require('gulp');
gulp.task('fileinclude', function() {
return gulp.src(['dist/index.html'])
.pipe(fileinclude({
prefix: '@@',
basepath: '@file'
}))
.pipe(gulp.dest('dist'));
});
index.html索引.html
@@include('../partials/header.html')
@@include('../partials/navbar.html')
@@include('../partials/footer.html')
Use gulp.watch(...) to track all changes, it's not just for html.使用 gulp.watch(...) 跟踪所有更改,它不仅适用于 html。 Any files in gulp are tracked using this method.
使用此方法跟踪 gulp 中的任何文件。
const gulp = require('gulp');
const include_file = require('gulp-file-include');
gulp.task('include', () => {
return gulp.src('./res/*.html')
.pipe(include({
prefix: "@@",
basepath: "@file"
}))
.pipe(gulp.dest('./public'));
});
gulp.task('watch', () => {
gulp.watch('./res/*.html', gulp.series('include'));
})
also my variant:也是我的变种:
const { src, dest, watch } = require('gulp'),
include_file = require('gulp-file-include');
function include() {
return src('./res/*.html')
.pipe(file_include({
prefix: '@',
basepath: '@file'
}))
.pipe(dest('./public/'));
}
function watching() {
watch('./res/*.html', include);
}
exports.watch = watching;
then:然后:
gulp watch
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.