Conditional settings for Gulp plugins dependent on source file

The plugin gulp-pug allows to pass global variables to pug files via data property. What if we don't need full data set in each .pug file? To implement conditional data injection, we need to access to current vinyl file instance inside pipe(this.gulpPlugins.pug({}) or at least to know the source file absolute path. Possible?

const dataSetForTopPage = {
    foo: "alpha",
    bar: "bravo"
};

const dataSetForAboutPage = {
    baz: "charlie",
    hoge: "delta"
};


gulp.src(sourceFileGlobsOrAbsolutePath)
    .pipe(gulpPlugins.pug({
      data: /* 
       if path is 'top.pug' -> 'dataSetForTopPage',  
       else if path is 'about.pug' -> 'dataSetForAboutPage'
       else -> empty object*/
    }))
    .pipe(Gulp.dest("output"));

I am using gulp-intercept plugin. But how to synchronize it with gulpPlugins.pug?

gulp.src(sourceFileGlobsOrAbsolutePath)
    .pipe(this.gulpPlugins.intercept(vinylFile => {
      // I can compute conditional data set here
      // but how to execute gulpPlugins.pug() here?
    }))
    // ...

It was just one example, but we will deal with same problem when need to conditional plugins options for other gulp plugins, too. E. g:

.pipe(gulpPlugins.htmlPrettify({ 
  indent_char: " ", 
  indent_size: // if source file in 'admin/**' -> 2, else if in 'auth/**' -> 3 else 4
}))

Solution

You'll need to modify the stream manually - through2 is probably the most used package for this purpose. Once in the through2 callback, you can pass the stream to your gulp plugins (as long as their transform functions are exposed) and conditionally pass them options. For example, here is a task:

pugtest = () => {
    const dataSet = {
        'top.pug': {
            foo: "alpha",
            bar: "bravo"
        },
        'about.pug': {
            foo: "charlie",
            bar: "delta"
        }
    };

    return gulp.src('src/**/*.pug')
        .pipe(through2.obj((file, enc, next) => 
            gulpPlugins.pug({
                // Grab the filename, and set pug data to the value found in dataSet by that name
                data: dataSet[file.basename] || {}
            })._transform(file, enc, next)
        ))
        .pipe(through2.obj((file, enc, next) => {
            const options = {
                indent_char: ' ',
                indent_size: 4
            };

            if(file.relative.match(/admin\//)) {
                options.indent_size = 2;
            } else if(file.relative.match(/auth\//)) {
                options.indent_size = 3;
            }

            file.contents = new Buffer.from(html.prettyPrint(String(file.contents), options), enc);
            next(null, file);
        }))
        .pipe(gulp.dest('output'));
}

For the pug step, we call through2.obj and create the pug plugin, passing it data grabbed from our object literal, indexed by filename in this example. So now the data passed into the compiler comes from that object literal.

For the html step you mention, gulp-html-prettify doesn't expose its transform function, so we can't reach into it and pass the transform back to the stream. But in this case that's OK, if you look at the source it's just a wrapper to prettyPrint in the html package. That's quite literally all it is doing. So we can just rig up our step using through2 to do the same thing, but changing our options based on the vinyl file's relative path.

That's it! For a working example see this repo: https://github.com/joshdavenport/stack-overflow-61314141-gulp-pug-conditional