ビルドプロセスを作成することでCSSの生産を準備する

おい、皆さん👋 あなたは、初心者としての私の時間のほとんどを知っている、私はちょうどプレーンCSSを書くために使用し、実際に何が次のことを考えることはない!閉じるこの動画はお気に入りから削除されています.(元に戻す)お気に入りに追加しますか?それはクールではないだろうか?🤷‍♂️

🚩 導入

地獄はい、それはクールでしょう.😎 それで、これはあなたのページをより速くロードさせる方法であなたのCSSデザインを微調整することになりそうです🚀 だけでなく、あなたのデザインすべてのブラウザ互換性を確認します.💻 そして、是非、CSSの生産をあなたのCSSから最大限に利用する準備をしてください.🎉

👀 何が必要ですか？

私たちはNPMからいくつかのパッケージをインストールするつもりです.それができないならば、それをしてくださいhere さあ.また、フラフラしている場合は、コーヒーカップを取得し、あなたが行ってもいいです.☕

📌 依存関係のインストール

新しいプロジェクトを始めましょうnpm init --y ( --y はデフォルト値です).
(依存関係として)インストールする依存関係は以下の通りです.

ノードSASS ( CSSを圧縮し、必要に応じてCSSにコンパイルします.

concat (複数のファイルを連結するために使用)

AutoPrefixer (主にCSSタグを自動的にプリフィックスで使う)

PostCSS CLI ( AutoPrefixerはPostcssのプラグインですので、これも必要です).

NPM Run ALL (複数のNPMスクリプトを並列または順次実行するCLIツール)

したがって、端末からこれを実行します.npm install node-sass concat autoprefixer postcss-cli npm-run-all --save-dev . では、スクリプトを書きましょうpackage.json それは我々のプロセスを実行します.

👨‍💻 スクリプトを実行する

スクリプトオブジェクトを下に表示します(package . json).それらのどれかが意味をなさないならば、あなたは彼らに言及することができます.

    "scripts": {
        "compile:sass": "node-sass sass/main.scss css/style.comp.css",
        "concat:css": "concat -o css/style.concat.css css/style.comp.css css/any-other-file.css",
        "prefix:css": "postcss --use autoprefixer -b \"last 10 versions\" css/style.comp.css -o css/style.prefix.css",
        "compress:css": "node-sass css/style.prefix.css css/style.css --output-style compressed",
        "build:css": "npm-run-all compile:sass concat:css prefix:css compress:css"
    }

我々が説明する前に、私はあなたに我々がSASS/メインで我々のsassを持っているということを知っていて欲しいです.SCSSは処理され、CSS/フォルダに格納されます.( SASSを書いていない場合は、CSSファイルを自分で作成した後、プログラムが実行後にCSSファイルを格納する出力として2つのフォルダを作成します)
フォルダ名は任意です

🙌 解説

これらのスクリプトは、単に入力するだけで実行できます.npm run <your-command-name> を返します.
☑ = ファイルを入力します
✅ = ファイルを出力する予定です

1️⃣ コンパイル: sass (オプション)

あなたがSASSで書くならば、あなたがこのステップを必要とするだけであるならば、それはさもなければスキップします.🏂 これはちょうどあなたのSASSコードをブラウザで読みやすいCSSにコンパイルします.

node-sass : 📌 パッケージ名

sass/main.scss : ☑ 我々の手動で書かれたsassファイルのアドレス

css/style.comp.css : ✅ CSSファイルの出力が格納されるアドレス

2️⃣ CSS (オプション)

つ以上のファイルにCSSを持っているなら、1つのCSSファイルと組み合わせることになります.

concat : 📌 パッケージ名

-o / --output : 出力ファイル

css/style.concat.css : ✅ すべてのCSSが格納される予定の出力ファイルのアドレス

css/style.comp.css : ☑ ステップ1から返されるファイル

css/any-other-file.css : ☑ 最終的に結合する必要のある他のCSSファイル

PS :あなたが1つのファイルを持っているならば、このステップは意味をなしません.だからスキップしますが、トレイルを追跡することを確認します.どのファイルがどのステップから返され、どちらが置かれているか.

3️⃣ プリペアド

これはあなたのCSSがベンダーの接頭辞を持っているようなコマンドです-webkit- , -moz , -ms- and -o- , そうでなければ手動で追加する必要があります.

Vendor prefixing is a way for browser makers to add support for new CSS features before those features are fully supported in all browsers.

How and why you would want to use CSS vendor prefixes in your website?

postcss : 📌 パッケージ名( AutoprefixerはPostcssの一部です)

--use : 使用するPostcssプラグインのリスト( autoprefixer ,ここ)

autoprefixer : パッケージ名をプレフィックスする

-b : ブラウザはブラウザに対応していて、どのブラウザに対して

"last 10 versions" : これはすべての主要なブロワーの最後の10のバージョンを取得caniuse.com

css/style.concat.css : ☑ ファイルのアドレスを置く

-o : 出力オプション

css/style.prefix.css : ✅ 出力ファイルのアドレス

追伸中last 10 versions 私は問題に直面しました.そして、それがもう一つの二重引用符の中に含まれるので、それは二重引用符のためでした\ メインダブルクォートの中のすべての二重引用符の前に.

4️⃣ 圧縮する

これにより、CSSファイルのサイズが大きくなり、ページ負荷が大きくなります.

node-sass : 📌 パッケージ名

css/style.prefix.css : ☑ このコマンドの入力を含むファイル(圧縮されていないcss )

css/style.css : ✅ 出力ファイルのアドレス

--output-style compressed : 圧縮を行うコマンド

PS . S :圧縮されたCSSをもう一つのCSSファイルに出力するのを選ぶことができますstyle.min.css これは大丈夫ですが、これを含めるにはHTMLにリンクタグを追加する必要があります.

5️⃣️ ビルド：CSS

最後に、すべてのコマンドを実行するだけで実行します.

npm-run-all : 📌 パッケージ名

compile:sass concat:css prefix:css compress:css : 実行のための順序順のコマンド一覧

ファクトファクト😉 を追加することができます--parallel パッケージ名の後にすべてのプロセスを同時に実行しますが、ここでは役に立ちません.なぜ?ここでは、各スクリプトはファイルを入力として受け取り、その出力ファイルは次の関数/スクリプトで必要とされます.
P . P . S :すべての出力ファイルが自動的に作成されるので、個別に作成する必要はありません.

🤝 結論

最後に、我々のビルドプロセスを設定しました🤘, はnpm-run-all build:css . それで、一言で言えば🥜, このプロセス

あなたが作るHTTPリクエストの数を最小にするために、一つのファイルであなたのCSSのすべての異なるファイルを結合します

データをフェッチすることによって自動的にブラウザの広い範囲のために必要なタグの接頭辞をセットアップしますcaniuse.com だから手動でする必要はありません

あなたの最終的なCSSをより多くの圧縮されたブラウザで使用することになっています.

💖 あなたに

私は新しい技術を学ぶのと同じくらい書くことが大好きです.しかし、真実は、旅は決して簡単です.そして、それは私が私が書くものを書く唯一の理由です、これらはかつて私が初心者として直面した質問でした、そして、私は私がしたのと同じものを持っている他の人を助けたいです.
だから私は何の困難や質問をかつて直面したり、初心者として直面している好奇心旺盛ですか?🤷‍♂️ このスレッドで返信します.