如何使用 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