Gulp partials和Jekyll _包括:如何使用两者?

qyswt5oh  于 2023-04-18  发布在  Gulp
关注(0)|答案(1)|浏览(171)

我是Gulp的新手。我使用的是一个Gulp模板,其中使用了部分。我不想改变模板,并按照给定的方式使用它,并在需要的地方添加我的Jekyll _includes/。
在gulpfile.js中,partials的用法如下:

// 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(); });
});

在构建partials之后,我应该如何使用Jekyll _includes/?
我很困惑,因为应该删除gulp partials,并重新开始与新鲜的Jekyll _includes/。有人使用两者吗?

uqcuzwp8

uqcuzwp81#

您可以同时使用Gulp partials和Jekyll _includes,但这需要对Gulpfile进行一些修改。当Jekyll构建站点时,它将同时使用Gulp partials和Jekyll _includes。
这些修改包括使用series(),它将任务功能和/或组合操作组合成更大的操作,这些操作将按顺序依次执行。
其他变化:

  • copy:partials任务将Gulp partials任务的输出从dist/html/partials复制到Jekyll _includes/目录。
  • clean:includes任务在复制Gulp部分文件之前删除_includes/目录中的所有文件。
  • dist任务现在将Gulp分部输出到dist/html/partials而不是dist/html。
  • 构建任务包括copy:partials任务,该任务在编译Gulp 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'));

相关问题