使用 gulp 和 gulp-rename 输出多个手写笔主题文件答案

【问题标题】：Using gulp and gulp-rename to output multiple stylus theme files使用 gulp 和 gulp-rename 输出多个手写笔主题文件
【发布时间】：2014-12-31 10:31:17
【问题描述】：

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

我们希望能够通过 CLI 告诉 gulp 要编译哪些主题，所以我设置 gulp 任务以采用“主题”的构建选项，并且我正在使用 gulp-rename 将主题名称添加到输出文件。但是，如果我给它一个以上的主题选项，我不能让 gulp 输出多个主题文件。

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-rename 的理解来看是有道理的，但我希望此时能够拆分管道以获取两个不同的文件。我不想实际将文件复制到新目录中，手动创建多个流以连接的解决方案并不令人满意，因为我可能只有一个主题或可能有十二个，我不想编辑构建文件以添加新主题。那么如何才能从一个流中分别编译出多个文件呢？

【问题讨论】：

标签： gulp stylus gulp-rename

【解决方案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

【讨论】：