Question

我正在创建一个Gulp插件，该插件需要有条件地执行基于插件内部生成的条件的任务。

根据我的理解，为实现条件执行而执行的当前方法被视为反模式，这是我想避免的事情。

关于插件

我正在创建的插件捆绑了类似于Vue的单个文件组件。插件消化的每个文件都会在传入的文件内容中查找DOM元素，并从此处根据遇到的元素进行修改。下面是一个非常简单的示例，说明如何设置传入的文件并使其外观：

hello-world.html

<style>
  .foo { }
</style>

<template>
  Hello World
</template>

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

在上面的示例中，该插件仅提取个<template></template>标签内的内容，并为style或script元素设置条件。

<script> </script>和<style> </style>标签，它们的工作原理略有不同。如果您正在运行构建任务，那么这些标签将被忽略，但是如果运行监视任务，它们的内容将与缓存副本进行区分，并且如果检测到更改，则将在插件中设置条件，例如：sfc.bundleScripts = true或sfc.bundleStyles = true。

我设计该插件的方式是使您可以将单个文件组件导入其相对的捆绑文件中，例如：

styles.scss

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

scripts.js

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

这种方法使我可以将<script></script>或<style></style>标记的内容打包为.scss或.js文件。我通过从插件中调用一个单独的模块来实现此目的，该模块处理从<style>内部检索<script>或components/hello-world.html标记的内容。

假定的反模式

这使我进入反模式。我目前在这3个任务之间建立统一的方式是通过运行包含scripts和styles任务的系列中的单个文件组件任务，例如：


 series(sfc, sfc_Styles, sfc_Styles)

在监视模式下运行时，scripts()和styles()任务在series()中被调用，但是仅根据插件中设置的sfc.*条件执行，非常粗糙的例子：


// 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)

那么可以吗，或者这是反模式吗？

Answer 1

因此，进一步的挖掘使我得出以下答案，由于我的当前方法不是（考虑到Gulp 4任务只是功能），所以我将采取以下答案。

作为参考，我从Github和Stack找到了以下答案：

有条件地执行任务

1 个答案: