Question

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

我们希望能够告诉gulp通过CLI编译哪些主题，所以我设置gulp任务以获取'theme'的构建选项，并且我使用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-rename的理解中有所了解，但我希望能够在此时拆分管道以获得两个不同的文件。我不想实际将文件复制到一个新目录，并且手动创建多个流来连接的解决方案并不令人满意，因为我可能只有一个主题或者可能有十二个，我不想要编辑构建文件以添加新主题。那么如何才能从一个流中单独编译多个文件呢？

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

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

1 个答案: