Gulp partials and Jekyll _includes: How to use both?

Question

I am new to Gulp. I am using a Gulp template where partials are used. I don't want to change the template and use it as given and add my Jekyll _includes/ where I need to...

in gulpfile.js partials are used as below:

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

What should I do use Jekyll _includes/ after partials are built?

I am confused as should remove gulp partials and start over with fresh Jekyll _includes/. Does anyone use both?

Answer 1

You can use both Gulp partials and Jekyll _includes together, but this requires some modifications in your Gulpfile. When Jekyll builds the site, it will use both the Gulp partials and the Jekyll _includes.

The modifications include using series() that combines task functions and/or composed operations into larger operations that will be executed one after another, in sequential order.

The other changes:

• The copy:partials task copies the output of the Gulp partials task from dist/html/partials to the Jekyll _includes/ directory.
• The clean:includes task deletes all files in the _includes/ directory before copying the Gulp partials.
• The html:dist task now outputs the Gulp partials to dist/html/partials instead of dist/html.
• The build task includes the copy:partials task that is run after the Gulp partials are compiled.

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'));