如何同时使用Gulp partials与Jekyll _includes？

你完全不需要二选一，通过调整Gulp工作流的顺序，就能同时保留现有Gulp模板，并且让Jekyll在构建后期处理它的_includes。以下是具体实现步骤：

一、核心思路 #

让Gulp先处理自己的@@前缀partials，生成包含Jekyll标签的中间文件，再交给Jekyll解析{% include %}标签，最终输出成品。

二、具体修改步骤 #

1. 调整路径配置 #

在gulpfile里新增临时目录和Jekyll相关路径，用于存放Gulp处理后的中间文件：

const path = {
  // 保留你原有的路径配置...
  tmp: {
    html: './tmp/html' // Gulp处理后临时文件目录
  },
  jekyll: {
    src: './tmp/html', // Jekyll读取的源目录指向临时文件
    dest: './dist/final' // Jekyll最终输出目录
  }
};

2. 修改原Gulp HTML任务 #

把原有的html:dist任务改成输出到临时目录，不再直接输出到最终dist：

// 处理Gulp Partials，输出到临时目录
gulp.task('html:tmp', function () {
  return gulp.src(path.src.html)
    .pipe(newer({ dest: path.tmp.html, extra: path.watch.partials }))
    .pipe(plumber())
    .pipe(fileinclude({ prefix: '@@', basepath: path.src.partials }))
    .pipe(beautify.html({ indent_size: 2, preserve_newlines: false }))
    .pipe(gulp.dest(path.tmp.html))
    .pipe(touch());
});

3. 添加Jekyll构建任务 #

用Node的child_process调用Jekyll命令，处理临时目录里的文件：

const { exec } = require('child_process');

// 调用Jekyll构建，解析_includes
gulp.task('jekyll:build', function (cb) {
  const jekyllCmd = `jekyll build --source ${path.jekyll.src} --destination ${path.jekyll.dest}`;
  exec(jekyllCmd, (err, stdout, stderr) => {
    if (err) {
      console.error('Jekyll构建出错:', stderr);
      return cb(err);
    }
    console.log('Jekyll构建完成:', stdout);
    cb();
    reload(); // 完成后刷新浏览器
  });
});

4. 创建串联任务 #

把两个任务串起来，先跑Gulp的partials处理，再跑Jekyll构建：

// 完整构建流程：Gulp Partials → Jekyll _includes
gulp.task('build', gulp.series('html:tmp', 'jekyll:build'));

三、使用方式 #

在你的源HTML文件里，可以同时写两种include标签：

• Gulp的@@include('header.html')：会被Gulp先处理替换成对应内容
• Jekyll的{% include footer.html %}：会保留到Jekyll构建时再解析

四、备选方案：完全迁移到Jekyll _includes #

如果你之后想彻底替换Gulp Partials，可以这么做：

• 把所有Gulp partials文件（比如src/partials/xxx.html）移动到Jekyll的_includes目录
• 把所有HTML里的@@include('xxx.html')替换成{% include xxx.html %}
• 移除Gulp里的fileinclude相关代码，直接让Jekyll作为主要模板引擎，Gulp只负责美化、刷新等辅助工作

内容的提问来源于stack exchange，提问作者Murat