I am struggling with a Gulp Task and what it is doing.
Let me start with the first task:
gulp.task('html-template:join', (cb) => {
gulp.src('./src/template-data/**/*.json')
.pipe(json_refs())
.pipe(jsonConcat('data.json', function (data) {
return Buffer.from(JSON.stringify(data));
}))
.pipe(gulp.dest('./build/templated-data-combined/'))
.on('end', function () {
if (fs.existsSync('./build/templated-data-combined/data.json')) {
const templateData = JSON.parse(fs.readFileSync('./build/templated-data-combined/data.json'));
for (let key in templateData) {
const pageData = templateData[key];
gulp.src('./src/templates/' + pageData.config.template)
.pipe(handlebars(pageData, {
batch: ['./src/layouts', './src/partials', './src/components/**/*', './src/elements']
}))
.on('error', handleError)
.pipe(rename(pageData.config.output))
.pipe(gulp.dest('./build/'))
}
} else {
console.log("No JSON for HTML Templating");
}
cb();
});
});
It looks as though this task is looking in ./src/template-data
and collecting all the JSON from the template-data
folder all the sub-folders under it, and dumping it into ./build/templated-data-combined/data.json
. Right?
The second task:
gulp.task('html:build-templates', () =>
gulp.src('src/*.html')
.pipe(handlebars(JSON.parse(fs.readFileSync('build/data/data.json')), {
batch: ['./src/layouts', './src/partials', './src/components', './src/elements']
}))
.pipe(htmlmin({collapseWhitespace: true}))
.on('error', handleError)
.pipe(gulp.dest('build/'))
)
This one is looking for the data.json we created in the previous task, however it is now looking in build/data/
, there is no script to move data.json
from templated-data-combined
to data
, then it is looking at all the handlebars templates is src/layouts
, src/partials
src/components
and src/elements
and is outputting them to the build folder? Right?
And the last task of confusion: gulp.task('html:build', gulp.series('JSON:merge-json', 'html:build-templates'));
This one runs the whole she-bang, it runs's JSON:merge-json
, the runs the html:build-templates
, now this is where it gets weird.
The is NO JSON:merge-json task, yet somehow these disjointed tasks successfully produce a DATA.json file in build/data
, and manage to compile the templates from the data.
My gulpfile dependencies look like this
const gulp = require('gulp'),
gulpif = require('gulp-if'),
sass = require('gulp-sass'),
sourcemaps = require('gulp-sourcemaps'),
browserSync = require('browser-sync').create(),
handlebars = require('gulp-compile-handlebars'),
layouts = require('handlebars-layouts'),
fs = require('fs'),
sassLint = require('gulp-sass-lint'),
autoprefixer = require('gulp-autoprefixer'),
cleanCSS = require('gulp-clean-css'),
cssnano = require('gulp-cssnano'),
concat = require('gulp-concat'),
uglify = require('gulp-uglify'),
clean = require('gulp-clean'),
merge = require('gulp-merge-json'),
babel = require('gulp-babel'),
htmlmin = require('gulp-htmlmin'),
browserify = require('browserify'),
buffer = require('vinyl-buffer'),
babelify = require('babelify'),
source = require('vinyl-source-stream'),
{ join } = require('path'),
through2 = require('through2'),
argv = require('yargs').argv;
const purgecss = require('gulp-purgecss');
const rename = require('gulp-rename');
const jsonConcat = require('gulp-json-concat');
const json_refs = require('gulp-json-refs');
const hbsfy = require('hbsfy').configure({
extensions: ['hbs']
})
All I am trying to do is convert what this is doing, and move it over to WebPack 5. however I can't figure out HOW this is doing what it is doing.
I have tried querying Stack Overflow, but nothing specific to this issue is coming up. I have also tried AI, but it is getting just as confused, and wants to add additional scripts to do the missing steps, but I don't think it needs to.
I'd just like to understand how this script even works.