1

私は自分のプロジェクト用にテーマ システムをセットアップしようとしています。現在、スタイラスでテーマ ファイルを取り、theme\default.theme.styl色を格納する変数のみを含み、含まれている他のコンポーネント スタイル ファイル (例button.styl) に適用します。アイデアは、複数のテーマ ファイルを持つことができるということです。たとえばblue.theme.styl、red.theme.stylgulp は、コンポーネントのスタイリングに基づいて 2 つの個別の css ファイルを出力します。したがって、 とを 2 つの別個のファイルとして取得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')

ビルド時にオプションを 1 つだけ指定すると、適切なテーマ スタイルでgulp --theme='blue'出力されるため、これは期待どおりに機能します。button.blue.cssしかし、複数のオプションを指定すると、適用された色として最後に含まれたテーマのファイル変数を持つgulp --theme='blue,red'名前のファイルが取得されます。button.blue,red.css

gulp と gulp-rename について私が理解していることから理解できますが、この時点でパイプを分割して 2 つの異なるファイルを取得できるようにしたいと考えています。実際にファイルを新しいディレクトリにコピーしたくありません。複数のストリームを手動で作成して連結するソリューションは満足のいくものではありません。テーマが 1 つしかない場合や 12 の場合があるためです。ビルド ファイルを編集して、新しいテーマを追加します。では、1 つのストリームから別々にコンパイルされた複数のファイルを取得するにはどうすればよいでしょうか?

4

1 に答える 1