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

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

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

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

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

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

次の構造を使用します。

私は 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 に出力 (>) します。

複数のファイルから単一のファイルを構成gulp.src()または生成することは可能ですか?gulp.dest()

上記のコードは、各入力ファイル (1 対 1) に対して出力ファイルを生成し、それぞれに対してソースマップを生成します。

それを行うには concat タスクをパイプする必要がありますか、それとも上記の 2 つの gulp メソッドのオプションを介して行うことができますか?

ありがとう。

ゴール

主に Sass を CSS にコンパイルするために使用されていた古いgulpfile.jsを更新していますが、現在は Gulp に次のことを実行させようとしています。

1. ブラウザを同期し、localhost サーバーを立ち上げる -完了
2. Sass をコンパイル => CSS -完了
3. JSHint で JavaScript エラーを表示する -完了
   • ES6 => ES6 を Babel でコンパイル(WORKING ON)
4. すべてのアセットを縮小する(WORKING ON)
   • プロジェクト ファイルのサイズを表示 -完了
5. index.html、style.css、画像を S3 にデプロイする(WORKING ON)
6. .scssファイルを監視し、変更時にブラウザをリロード.htmlする -完了

問題

• Javascript を縮小してscripts.min.js ファイルを作成しようとすると、縮小されたすべての新しい JavaScript ファイルにサフィックス min が追加され続けます。

フォルダ構造

gulpfile.js

この質問は何度か聞かれました。プロジェクトに投稿されたソリューションを適用しようとしましたが、まだ@mediaクエリを実行できません。

これが私のHTMLコードです。

psotcss-neat プラグインを使用して POSTCSS を使用して生成された CSS コード

私のCSSコード

Photoshop CC でロゴを作成しました。エクスポート > SVG。私のプロジェクトに追加されました。Chrome Dev Tools の html からパスに移動し、SVG が正常に表示されるので、正常に参照されています。しかし、アイコンは Web ページに表示されません。svg を Inkscape にインポートし、別の svg 形式で再エクスポートして、それが問題かどうかを確認することさえ試みました。Chrome Dev Tools でファイルを表示すると、次のようになります。

rootsを使用して、lostを使用しています。

ヒスイ

スタイラス/紛失

編集

これがsvgのコードです。

http://pastebin.com/UkGzVYp8