如何使用 gulp 将部分 html 文件包含到另一个 html 文件中？

Question

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. 我想将这些部分文件包含到 index.html 中。 我尝试了 gulp-file-include 插件，它工作正常，但我希望每当我对任何部分文件执行任何更改时，都应该更新 index.html 文件。 我无法使用 gulp-file-include 插件执行此操作，请提供任何其他解决方案...？

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'));
});

索引.html

@@include('../partials/header.html')
@@include('../partials/navbar.html')
@@include('../partials/footer.html')

Answer 1

使用 gulp.watch(...) 跟踪所有更改，它不仅适用于 html。 使用此方法跟踪 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'));
})

也是我的变种：

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;

然后：

gulp watch