1

我正在尝试为我的项目设置一个主题系统，我目前在手写笔中使用了一个主题文件theme\default.theme.styl，它只包含存储颜色的变量并将其应用于我们包含的任何其他组件样式文件（例如button.styl）。我的想法是我可以拥有多个主题文件，比如blue.theme.stylandred.theme.styl并且 gulp 将根据组件样式输出两个单独的 css 文件。所以我会得到button.blue.stylandbutton.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 的理解来看是有道理的，但我希望此时能够拆分管道以获得两个不同的文件。我不想实际将文件复制到新目录中，手动创建多个流以连接的解决方案并不令人满意，因为我可能只有一个主题或可能有十二个，我不想编辑构建文件以添加新主题。那么如何才能从一个流中分别编译多个文件呢？

4

1 回答 1

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
于 2014-12-31T02:31:17.927 回答