14

postcss を含むワークフローを理解しようとしています。私が必要としているのは、css パーシャルを 1 つのフォルダーに配置し、それらを監視して、バンドル css ファイルを出力することです。バンドル css ファイルには、先頭に base.css ファイルが含まれている必要があります。

postcss には --watch フラグがあり、複数のファイルを監視できますが、出力できるのは複数のファイルのみであり、バンドル css ファイルは出力できません。すべてのファイルを結合し、stdin を使用catしてそれらを postcss にパイプすることができます。しかしcat、postcss からコマンドをトリガーできません。

私のファイル構造は次のようになります。

partials/
    |_one.css
    |_two.css
styles/
    |_base.css
    |_bundle.css

npm を使用してスクリプト セクションを配置し、CLI コマンドを使用して目標を達成するにはどうすればよいですか?

私の主な問題は、あるステップが次のステップをブロックすることなく、ビルド ステップを調整する方法を理解することです。実際のワークフローの例へのリンクは素晴らしいでしょう!

編集解決策が機能しましたが、ソースマップでは使用できず、グローバル変数を持つことができず、2 段階のプロセスであるため、最適ではありません。しかし、誰かがより良いアプローチを提案できることを期待して、ここで概要を説明します。

次の構造を使用します。

build/
    |_stylesheet/
        |_default.css (final processed css)
partials/
    |_one.css
    |_one.htm (html snippet example)
    |_two.css
    |_two.htm (html snippet example)
styles/
    |_base.css
    |_bundle/ (css files from partial/ that is partly processed)
        |_one.css
        |_two.css
    |_master.css (import rules)

私は 2 段階のプロセスを持っていpackage.jsonます。まず、styles/bundle フォルダー ( mkdir -p)があることを確認してから、 nodemonを起動して、partials / の css ファイルを監視します。変更が発生すると、nodemon が実行されnpm run css:buildます。

css:buildCSS ファイルを partials/ で処理し、styles/bundle/ に出力します (複数のファイルを監視して 1 つのバンドル ファイルを出力する方法がわからないことを思い出してください)。

を実行した後css:build、npm が実行postcss:buildされ、styles/bundle/ から @import css ファイルが作成された master.css ファイルが処理されます。次に、処理した内容を stdout から build/stylesheet/default.css に出力 (>) します。

{
    "css": "mkdir -p styles/bundle && nodemon -I --ext css --watch partials/ --exec 'npm run css:build'",
    "css:build": "postcss --use lost --use postcss-cssnext --dir styles/bundle/ partials/*.css",
    "postcss:build": "postcss --use postcss-import --use postcss-cssnext --use cssnano styles/master.css > build/stylesheet/default.css",
}
4

2 に答える 2

3

おそらく、代わりにwebpackを使用して、単一の css ファイルと、監視フラグを持つ他のリソースを構築することを検討する必要があります。これは非常に効率的で、リソースやファイルに変更を加えた後、常に手動で再構築する必要はありません。

于 2015-10-15T18:14:20.387 に答える