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

ujv3wf0j  于 2022-12-08  发布在  Gulp
关注(0)|答案(1)|浏览(205)

我有两个文件夹,distpartials,'dist'文件夹包含index.html文件和'partials'文件夹包含header.html,navbar.html,和footer.html文件。我想包括这些部分文件到index.html。我尝试了gulp-file-include插件,它的工作正常,但我希望每当我执行任何部分文件的任何更改,index.html文件应该被更新。我不能这样做与gulp-file-include插件,请任何其他的解决方案...

gulp文件.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')
r6vfmomb

r6vfmomb1#

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

相关问题