Gulp根据文件更改构建HTML

Question

我有这样的目录结构：      /build /src /html /pages index.html about.html ... /partials _footer.html _header.html /stylus /js /fonts /img 好吧，标准的目录结构，我监视./src文件夹中的更改，并运行html，css，js等特定任务。问题是-当我对 ./ src / html / partials进行更改时文件-我需要重建所有 ./ src / html / pages 文件，但是当我从 ./ src / html / pages 更改一个文件时，例如 index.html ，我只需要重建一个文件。目前，我的代码仅运行任务 build：html 进行 ./ src / html 中的任何更改，并且全部从 ./ src / html / pages 是否可能获得这种行为（我的build：html使用不同的glob，取决于更改的文件）？这是我当前的gulpfile.js

var gulp = require('gulp');
// Utils
var del = require('del');
var rigger = require('gulp-rigger');
var yargs = require('yargs');
const spritesmith = require('gulp.spritesmith');
const merge = require('merge-stream');
// Server
var browserSync = require('browser-sync').create();
var reload = browserSync.reload;
// CSS(minification - cssnano)
var stylus = require('gulp-stylus');
var nib = require('nib');
var sourcemaps = require('gulp-sourcemaps');
var postcss = require('gulp-postcss');
// Error handling and notifications
var plumber = require('gulp-plumber');
var notify = require("gulp-notify");
// Save to memory
var GulpMem = require('gulp-mem');
var gulpMem = new GulpMem();

// Main files to compile
const src = {
  html: './src/html/pages/*.html',
  css: './src/styl/[^_]*.styl',
  js: './src/js/main.js',
};

// What files to watch(src folder, by subfolders)
const watch = {
  html: './src/html/**/*.html',
  css: './src/styl/**/*.*',
  js: './src/js/**/*.*',
};

// Says for itself
const dest = {
  html: './dest',
  css: './dest/css',
  js: './dest/js',
};

// Plugin's and custom settings
gulpMem.serveBasePath = './dest';
gulpMem.enableLog = false;
var argv = yargs.default({
  toMemory: true
}).argv;


// Build tasks
gulp.task('build:html', function() {
  return gulp.src(src.html)
    .pipe(plumber({errorHandler: notify.onError("Error: <%= error.message %>")}))
    .pipe(rigger())
    .pipe(argv.toMemory ? gulpMem.dest(dest.html) : gulp.dest(dest.html))
    .pipe(reload({stream:true}));
});

gulp.task('build:css', function() {
  var plugins = [
    require('postcss-import')(),
    require('autoprefixer')({
      browsers: ['> 0%']
    })
  ];

  return gulp.src(src.css)
    .pipe(plumber({errorHandler: notify.onError("Error: <%= error.message %>")}))
    .pipe(sourcemaps.init())
    .pipe(stylus({
      use: nib()
    }))
    .pipe(postcss(plugins))
    .pipe(sourcemaps.write('.'))
    .pipe(argv.toMemory ? gulpMem.dest(dest.css) : gulp.dest(dest.css))
    .pipe(reload({stream:true}));
});

gulp.task('build:js', function() {
  return gulp.src(src.js)
    .pipe(plumber({errorHandler: notify.onError("Error: <%= error.message %>")}))
    .pipe(rigger())
    .pipe(argv.toMemory ? gulpMem.dest(dest.js) : gulp.dest(dest.js))
    .pipe(reload({stream:true}));
});

// General build
gulp.task('build', gulp.parallel(
  'build:html',
  'build:css', 
  'build:js', 
));

// Static Server + watching html files
gulp.task('serve', function(done) {
  browserSync.init({
    server: dest.html,
    middleware: gulpMem.middleware
  });

  done();
});

gulp.task('watch', function(done) {
  gulp.watch(watch.html, gulp.series('build:html'));
  gulp.watch(watch.css, gulp.series('build:css'));
  gulp.watch(watch.js, gulp.series('build:js'));
  done();
});

gulp.task('default', gulp.series(
  'build',
  gulp.parallel(
    'serve',
    'watch'
  )
));

gulp.task('clean', function(done) {
  del('dest');
  done();
});