0

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

我为实现我所理解的条件执行而实施的当前方法被认为是反模式，这是我想避免的。

关于插件

我正在创建的插件捆绑了类似于 Vue.js 的单个文件组件。插件消化的每个文件都会在传入的文件内容中查找 DOM 元素，并从这里根据遇到的元素应用修改。下面是一个非常小的示例，传入的文件是如何设置和查看的：

你好-world.html

<style>
  .foo { }
</style>

<template>
  Hello World
</template>

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

在上面的示例中，插件将仅提取<template></template>标签内的内容并为or元素设置条件。stylescript

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

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

样式.scss

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

脚本.js

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

这种方法允许我捆绑<script></script>或<style></style>标记的内容，就好像它们是.scss或.js文件一样。我通过从插件内部调用一个单独的模块来实现这一点，该模块处理从内部检索<style>or<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)

那么这是可以的还是反模式？

4

1 回答 1

0

因此，进一步的挖掘使我得到了以下答案，考虑到 Gulp 4 任务只是函数，我将把这些答案视为我目前的方法不是反模式]。

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

于 2019-02-10T05:13:49.480 回答