使用 gulp 和 gulp 重命名输出多个手写笔主题文件

Question

我正在尝试为我的项目设置一个主题系统，我目前在手写笔中获取一个主题文件，例如themedefault.theme.styl，该文件仅包含存储颜色的变量并将其应用于我们包含的任何其他组件样式文件（例如 button.styl ）。 这个想法是我可以有多个主题文件，比如blue.theme.styl和red.theme.styl，gulp 将根据组件样式输出两个单独的 css 文件。 所以我会把button.blue.styl和button.red.styl作为两个单独的文件。

我们希望能够告诉 gulp 要通过 CLI 编译哪些主题，因此我将 gulp 任务设置为采用"主题"的构建选项，并且我使用 gulp-rename 将主题名称添加到输出文件中。 但是，如果我给它多个主题选项，我就无法输出多个主题文件。

TaskManager.createTask
  name: 'css'
  description: 'Build the component CSS files'
  options: buildOptions.concat
    name: 'theme'
    type: 'Array'
    description: 'themes to compile'
    default: 'default'
    supported: ['default', 'blue', 'red']
  hide: true
  fn: ->
    themeName = TaskManager.getArg('theme')
    DEST = 'dest'
    nib = require 'nib'
    stream = gulp.src ["src/**/*.styl", "!src/theme/*", "!src/global/*"]
      .pipe(plugins.plumber(errorHandler: TaskManager.error))
      .pipe(plugins.stylus
        use: [
          nib()
        ]
        include: [
          'src/util'
          'src/global'
          'src/theme'
        ]
        import: themeName.map (val) -> "#{val}.theme"
      )
      .pipe(rename (path) ->
        path.extname = ".#{themeName}.css"
        undefined
      )
      .pipe(plugins.filelog 'css')
      .pipe(gulp.dest 'dest')

如果我在构建时只给它一个选项，以便gulp --theme='blue'输出具有适当主题样式的button.blue.css，这将按预期工作。 但是，如果我给它多个选项，比如gulp --theme='blue,red'我会得到名为button.blue,red.css的文件，这些文件将主题的文件变量作为应用的颜色最后包含在内。

根据我对gulp和gulp重命名的理解，这是有道理的，但我希望能够在这一点上拆分管道以获取两个不同的文件。 我不想实际将文件复制到新目录中，手动创建多个流进行连接的解决方案并不令人满意，因为我可能只有一个主题或可能有十二个主题，而且我不想编辑构建文件来添加新主题。 那么，如何从一个流中单独编译多个文件呢？

Answer 1

事实证明，

它只返回一个流数组：

TaskManager.createTask
  name: 'css'
  description: 'Build the component CSS files'
  options: buildOptions.concat
    name: 'theme'
    type: 'Array'
    description: 'themes to compile'
    default: 'default'
    supported: ['default', 'blue', 'red']
  hide: true
  fn: ->
    themes = TaskManager.getArg('theme')
    DEST = 'dest/components'
    nib = require 'nib'
    stream = []
    createTask = (themeName) ->
      return gulp.src ["src/**/*.styl", "!src/theme/*", "!src/global/*"]
        .pipe(plugins.plumber(errorHandler: TaskManager.error))
        .pipe(plugins.stylus
          use: [
            nib()
          ]
          include: [
            'src/util'
            'src/global'
            'src/theme'
          ]
          import: "#{themeName}.theme"
        )
        .pipe(rename (path) ->
          path.extname = ".#{themeName}.css"
          undefined
        )
        .pipe(plugins.filelog 'css')
        .pipe(gulp.dest 'dest')
    themes.map (name) ->
      task = createTask name
      stream.push task
    return stream