最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

json - Unusual Gulp Task Behaviour - Stack Overflow

programmeradmin4浏览0评论

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.

发布评论

评论列表(0)

  1. 暂无评论