フロントエンド構築手法 Gulpシリーズ(1)：なぜフロントエンド構築が必要なのか_html/css_WEB-ITnose

IDE を使用してバックエンド プログラムを作成する場合、.NET の場合は、通常、プロジェクトがコンパイルされて通過することを確認するために Visual Studio を使用する必要があることは誰もが知っています。プロジェクトがコンパイルされて合格することは、すべてのプログラマーにとって必須の要件です。

しかし、バックエンドプログラマーの多くはフロントエンドについて理解していないことが多いため、WEB プロジェクトに取り組む際にいくつかの問題が発生します。

JavaScript と CSS のバージョンの問題

JavaScript と CSS は静的ファイルであることは誰もが知っています。アドレスが変更されない場合、ブラウザーはこれらのファイルをキャッシュします。つまり、変更が必要なときにキャッシュされます。 JavaScript や CSS ファイルは、たとえバックエンドを変更したとしても、クライアントがそれを見ることができなくなります。これは、現在、ほとんどすべての WEB プログラムが JavaScript に大きく依存しているため、「JS が世界を支配する」時代には受け入れられません。 CSS の使用が必要です。私が経験したプロジェクトでは、長年の経験を持つプログラマーでも、JavaScript や CSS ファイルのバージョンの問題に遭遇しました。たとえば、バグの原因が JavaScript であったため、プログラマーがそれを修正したことがあります。顧客は背景色を変更するように要求しましたが、それを顧客にデプロイするか、デプロイのためにコードを顧客に渡すと、顧客は、この時点ではまだバグが存在すると、プログラマがよく言うことが表示されます。 > 「私のローカルは大丈夫です」 、そして最終的に他の人に助けを求めた後、ブラウザのキャッシュがクリアされていないことがわかり、一部のプログラマーはすぐに顧客に次のように言いました。「ブラウザのキャッシュをクリアするには、Ctrl+F5 を押す必要があります。 」 このようなことを聞​​くと、照明を消して暗い部屋に取り残されるような気分になります。 まず、Ctrl+F5 を使用している一般ユーザーがどれだけいるでしょうか。 次に、Ctrl+F5 を使用するユーザーは何人いるでしょうか?

では、どうすればよいでしょうか?多くのプログラマは、バージョン番号を追加するだけで、ブラウザがそれを新しいファイルであると認識することを知っていると思います。たとえば、元は http://www.a.com/app.js でした。今後は、アドレスを変更するだけで済みます。 http://www.a.com/app.js?v=1.0 で十分です

しかし、このアクションが手動の場合、基本的にプログラマーは 10 回中少なくとも 5 回は忘れてしまいます。なぜフロントエンド構築が必要なのか

JavaScript と CSS の依存関係の問題

私たちがよく遭遇するもう 1 つの問題は、JavaScript と CSS の依存関係の問題です。簡単に言うと、JavaScript と CSS はオンになっています。ページの順序の問題です。

モジュール管理を使用することはできても、CSS が機能しなかったり、JavaScript の特定の変数やメソッドが見つからなかったりすることがよくあります。多くの場合、これは JavaScript または CSS の導入順序が間違っているためです。 RequireJS などがありますが、特に CSS には優れたモジュール管理コンポーネントがないため、多くの場合、依然として別のファイルを導入する必要があります。

その場合、JavaScript と CSS の順序付けの問題を管理するための統一された場所が必要ですが、ビルド ツールを使用すると、そのような問題を大幅に軽減できます。

パフォーマンスの最適化

ブラウザーが要求するファイルが多いほど、時間がかかることは誰もが知っています。また、要求されるファイルが大きいほど、特に次のような場合に時間がかかります。現在、多くのフロントエンド MVC および MVVM フレームワークを使用していますが、フロントエンド コードをより明確にし、より合理的な構造にするために、大量の JS ファイルを使用しているため、間違いなく Web ページの速度が遅くなります。この問題を解決するには、2 つのことを行う必要があります

ファイルのマージ

ブラウザは複数の JS ファイルをダウンロードする必要があります。また、ブラウザには同時実行制限があります。複数のファイルを同時にダウンロードした場合、ブラウザーの同時実行数が 5 の場合、JS ファイルが 20 個あり、各 5 に 2 秒かかり、JS ファイルをダウンロードするだけで 8 秒かかります。すると、Web ページのパフォーマンスが想像できます。 , そのため、ファイル数を減らすために複数のファイルを結合する必要があります。

ファイルの圧縮

JavaScript と CSS の場合、スペースや改行はすべてファイルを読みやすくするためのものです。コードですが、マシンの場合、これらは影響を与えないため、ファイル サイズを減らすために、通常はツールを使用してスペースや改行を削除します。場合によっては、短い変数名も使用します (これはツールで行う必要があることに注意してください)。最終圧縮中)、ファイル サイズを減らすために、ソース コードは名前の読みやすさを保証する必要があります。

すべてのフロントエンド ビルド ツールには、ファイルのマージと圧縮機能があります。

効率の向上

ベンダー プレフィックス

CSS3 を使用することが増えると、ブラウザごとに CSS のプレフィックスが異なることがわかります。非常に面倒ですが、ビルド ツールを使用すると、多くのビルド ツールで CSS ベンダー プレフィックスを自動的に追加できます

単体テスト

JavaScript 単体テストでは MVC または MVVM を使用します。フレームワークを使用すると、ますます簡単になります。単体テストは品質保証の非常に重要な手段であるため、送信する前に、ビルド ツールを使用して単体テストを自動的に実行することが非常に重要です

コード分析

私たちが作成する JavaScript には、セミコロンの追加忘れ、特定の変数の欠落など、潜在的なバグが含まれることがよくあります。いくつかの JavaScript コード分析ツールを使用すると、いくつかのよくある質問を確認するのに役立ちます。

HTML は JavaScript または CSS ファイルを参照します

たとえば、フロントエンド JavaScript と CSS を参照するために Bower などのサードパーティ ライブラリを使用する必要がある場合、バージョンがアップグレード、追加、削除されると、など、HTML を手動で変更する必要がある場合、前者は時間がかかりますが、後者は省略する方が簡単です。特にデバッグ バージョンと実稼働バージョンを切り替える必要がある場合は、余分な作業が多くなります。フロントエンド ビルド ツールはこれらの問題をうまく解決できます。

最後に

フロントエンド構築で最も一般的に使用される関数をいくつかリストしました。手動で行うことを置き換えることができる構築ツールも数多くあると思います。詳細については後ほど説明します。アーティファクト Gulp を使用して、上記の問題を 1 つずつ解決します。