我创建需要基于从插件内产生的条件条件执行任务的咕嘟咕嘟插件。
目前的方法,我已经实现,实现从我的理解被认为是一个反模式的条件执行,这是我想避免的。
关于插件
该插件我创建捆绑类似的Vue单个文件组件。由插件消化每个文件会在传递的文件内容中的DOM元素,从这里应用基于它遇到的元素上的修改。下面是一个很小的例子,如何中的文件是通过设置和外观:
你好,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)
因此,这是好的,也这是一个反模式?
因此,进一步的挖掘使我如下回答这,我要带我的目前的做法不是一个反模式,考虑到咕嘟咕嘟4个任务只是功能。
作为一个参照点,我发现从GitHub和堆栈如下回答: