Conditional execution of tasks

I am creating a Gulp plugin that requires conditional execution a tasks based on a condition generated from within the plugin.

The current method I have implemented to achieve the conditional execution from what I understand is considered an anti-pattern and this is something I would like to avoid.

About the plugin

The plugin I am creating bundles single file components similar to Vue. Each file digested by the plugin looks for DOM elements within the file contents passed in and from here applies modifications based on the element it encounters. Below is a very minimal example how the passed in files are setup and look:

hello-world.html

<style>
  .foo { }
</style>

<template>
  Hello World
</template>

<script>
  var foo = 'bar'
  console.log(foo)
</script>

In the example above the plugin would extract contents within the <template></template> tags only and set conditions for the style or script elements.

The <script> </script> and <style> </style> tags, they work a little different. If you're running a build task these tags will be ignored but if running a watch task their contents will be diffed against a cache copy and if changes are detected a condition will be set within the plugin, eg: sfc.bundleScripts = true or sfc.bundleStyles = true.

The way I have designed that plugin is so that you can import the single file component within their relative bundle files, for example:

styles.scss

@import("components/hello-world.html")

scripts.js

import HelloWorld from 'components/hello-world.html'

This approach allows me to bundle the contents of <script></script> or <style></style> tags as if they were .scss or .js files. I achieve this by calling a separate module from within plugin which handles retrieving the contents of either the <style> or <script> tag from within components/hello-world.html.

The presumed anti-pattern

This brings me to the anti-pattern. The way in which I am currently establishing unity between the 3 tasks is by running the single file component task in a series that includes the scripts and styles tasks, eg:


 series(sfc, sfc_Styles, sfc_Styles)

When running in watch mode the scripts() and styles() tasks are called within series() but are only executed based on the sfc.* condition that was set within the plugin, a very rough example:


// Basic example of plugin task fn 
function sfc () {
  return src('src/components/*.html')
  .pipe(sfc.bundle())
  .pipe(dest('dest'))
}

// Basic example of conditional execution of styles 
function sfc_Styles () {
  if(sfc.bundleStyles) {
    return styles() // calls the styles task
  } 
}

// Basic example of conditional execution of scripts 
function sfc_Scripts () {
  if(sfc.bundleScripts) {
     scripts() // calls the scripts task
  } 
}

exports.components = series(sfc, sfc_Styles, sfc_Scripts)

So is this ok or is this an anti-pattern?

Solution

So further digging has led me to the following answers which I'm going to take as my current approach not being an anti-pattern, considering that Gulp 4 tasks are just functions].

As a reference point, I found the following answers from Github and Stack: