Gulp partials 和 Jekyll _includes：如何同时使用两者？

Question

我是 Gulp 的新手。我正在使用使用了部分的 Gulp 模板。我不想更改模板并按给定的方式使用它并在我需要的地方添加我的 Jekyll _includes/...

在 gulpfile.js 部分使用如下：

// Compile html
gulp.task('html:dist', function () {
  return gulp.src(path.src.html)
    .pipe(newer({ dest: path.dist.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.dist.html))
    .pipe(touch())
    .on('end', () => { reload(); });
});

在部分构建完成后，我应该使用 Jekyll _includes/ 做什么？

我很困惑，因为应该删除 gulp partials 并从新的 Jekyll _includes/ 开始。有人同时使用吗？

Answer 1

你可以同时使用 Gulp partials 和 Jekyll _includes ，但这需要在你的 Gulpfile 中进行一些修改。当 Jekyll 构建站点时，它将同时使用 Gulp partials 和 Jekyll _includes。

修改包括使用 series() 将任务函数和/或组合操作组合成更大的操作，这些操作将按顺序依次执行。

其他变化：

• copy:partials 任务将 Gulp partials 任务的输出从 dist/html/partials 复制到 Jekyll _includes/ 目录。
• clean:includes 任务在复制 Gulp 部分之前删除 _includes/ 目录中的所有文件。 html:dist 任务现在将 Gulp 部分输出到 dist/html/partials 而不是 dist/html。
• 构建任务包括在编译 Gulp partials 之后运行的 copy:partials 任务。

const del = require('del');

gulp.task('copy:partials', function () {
  return gulp.src(path.dist.html + '/partials/**/*')
    .pipe(gulp.dest('_includes/'));
});

gulp.task('clean:includes', function () {
  return del('_includes/**/*');
});

gulp.task('html:dist', gulp.series('clean:includes', function () {
  return gulp.src(path.src.html)
    .pipe(newer({ dest: path.dist.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.dist.html + '/partials'))
    .pipe(touch())
    .on('end', () => { reload(); });
}));

gulp.task('build', gulp.series('html:dist', 'copy:partials'));