何よりもまず、このプロジェクトのルートディレクトリの端末にpnpm install
実行してください。これにより、必要なすべての依存関係がインストールされ、 node_modulesフォルダーが生成されます。このステップは非常に重要です。
このプロジェクトでは、ユーティリティファーストCSSフレームワークであるTailwind CSSを使用しています。このプロジェクトには、必要な依存関係を既に含める必要があります。 node_modulesフォルダーが欠落している場合は、 pnpm install
実行するだけで、 package.jsonファイルで指定されている依存関係で生成する必要があります。
Tailwind CSS Intellisenseを有効にするには、VSコード拡張機能が必要です。 Tailwind CSS Extension Packをインストールすることをお勧めします。これには、Tailwind CSSを使用するためにすべてが連携してより良いエクスペリエンスになるいくつかの拡張機能が付属しています。詳細については、上記のリンクをクリックしてください。
プロジェクトのルートフォルダーには、アセット/スタイルフォルダーがあります。これにより、 Tailwind.cssファイルがあります。このファイルは、最終的に完全にコンパイルされたTailwind CSSスタイルを生成するために使用されます。コンパイルすると、クラスをStyles.cssファイルに出力します。これは、 Assets/Stylesフォルダーにあります。
開発環境で動作するには、 dev
NPMスクリプトを実行します。これを行うには、以下に概説する方法のいずれかを使用します。
pnpm run dev
実行します。これにより、すべてを事前に生成する代わりに、スタイルをオンデマンドで生成する長期にわたるウォッチプロセスが開始されます。これは、開発をより迅速かつ効率的にするために非常に便利です。端末には、最初のコンパイルメッセージとそれがかかった時間が表示されます。 HTMLファイル、 TailWind.CSSファイル、またはTailWind.config.jsファイルを保存すると、CSSが処理され、再コンパイルされます。これらのスタイルは、開発プロセスでは縮小されません。
クラスはオンデマンドで追加されますが、オンデマンドは削除されていません。これは現在、Tailwind CSSの作成者であるAdam Wathanが述べているように設計によるものです。これを回避するには(キャッシュバスト)、 Tailwind.cssファイルを保存するだけです。完全な再コンパイルを強制し、未使用のクラスを削除します。
時計プロセスを殺すには、プロセスが実行されているという端末に焦点を当て、 CTRL + C
を押します。プロセスの終了を確認するように求められる必要があります。 Y
を入力してENTER
キーを入力して、選択を確認します。
VSコード拡張子を使用してサーバーを起動します。 [VSコード拡張]タブで「ライブサーバー」を検索します。または、Visual Studio Marketplaceで見つけることができます。
拡張機能をダウンロードしてインストールすると、青いリボンのウィンドウの右下隅に新しいボタンが表示される場合があります。それはライブに行くと言います。それをクリックすると、サーバーを起動してブラウザで開く必要があります。
ボタンが表示されない場合は、VSコードファイルエクスプローラーのindex.htmlファイルを右クリックして、ライブサーバーで[開く]をクリックします。
生産用の建物は、開発のための建物に似ています。次のいずれかを実行して、生産用のCSSを構築します。
pnpm run prod
を実行します。prod
を実行します。以前に使用した開発スクリプトに反して、これは長期にわたる時計プロセスを開始しません。むしろ、このスクリプトはCSSを一度だけコンパイルします。ルートフォルダーにあるHTMLファイルにあるクラスのみを使用し、それらをStyles.cssファイルにコンパイルします。これらのスタイルは削除されます。
このプロジェクトでは、Gulpを使用して、展開用のプロジェクトを構築します。 Gulpを実行することにより、プロジェクトのルートにdistフォルダーが作成されます。 Gulpは、プロジェクトのソースとアセットから必要なすべてのファイルをDISTフォルダーにコピーします。
それに加えて、Gulpは必要に応じてファイルを最適化および監督します。 HTML、SVG、およびJavaScriptファイルはすべて縮小されます。ファイルの模倣とは、単に白人やその他の不要な文字/記号を削除することを意味します。これを行い、ファイルのサイズを削減します。
スタイル(CSS)もDISTにコピーされます。 CSSは既にTailwind CLIのPostCSSとJITエンジンの使用によって抑制されているため、ここで削除する必要はありません。 gulp
実行する前に、最初にpnpm run prod
実行することが重要です。これを行わないことで、GulpはCSSの非マイニファイドバージョンを使用します。
画像もコピーされ、画像オプティマイザーであるGulp-Imageを使用して最適化されます。これにより、PNG、JPG、およびGIF画像のみが最適化されます。他のほぼすべての画像タイプはコピーされますが、PDFファイルを含む最適化されていません。
では、どのようにガルプを使用しますか?とても簡単です!ここに3つのオプションがあります。 1)VSコード端子を開き、コマンドgulp
実行します。これにより、ルートディレクトリのgulpfile.jsファイルで見つかったデフォルトタスクが実行されます。デフォルトのタスクは、他のすべてのタスクを順番に実行して、プロジェクトを構築します。 2)あるいは、 gulp
と呼ばれるNPMスクリプトを作成しました。これは、[NPMスクリプト]タブのVSコードウィンドウの左下隅から実行できます。 3)[NPMスクリプト]タブが表示されない場合は、 pnpm run gulp
実行して端末でこのコマンドを実行することもできますが、その時点でgulp
を入力するのは簡単です。
出力フォルダーの名前をdistから他の何かに変更する必要がある場合、 gulpfile.jsファイルに移動して、ファイルの上部近くにある変数destination
を見つけます。デフォルトでは、 dist
に設定されていますが、文字列のdist
部分を必要なものに置き換えることでこれを変更することができます。もう1つの一般的な宛先フォルダー名はdocs
です。これは、プロジェクトをGitHubページに展開するために使用されます。