一般的に使用されるフロントエンドの自動化ツール
目的:
1、フロントエンドエンジニアリングは、事業特性に基づいて開発効率のための開発プロセスを含むフロントエンド開発プロセスの標準化、技術選択、コードの仕様、ビルドの公開とフロントエンドエンジニアのコードの品質を向上させます
2、それを簡単にする目的を達成するためのフロントエンドエンジニアリングは標準化、自動化ツールの開発効率、性能、品質、多人数のコラボレーションと開発の経験を通してフロントエンドプロセスを改善することです
一般的な自動ビルドツール
イサキ、一息、WebPACKの、FIS
自動ビルドツールの作業
ビルドそれがJavaScriptのにソースコードを変換することで行うためのツールを実行することができ、CSS、HTMLコード
実際のエンジニアリングの建設、一連の処理は、コードを達成するために具体フロントエンド開発のアイデアの自動化は、コードが複雑な自動化一連の処理を実行するために作ります。フロントエンドの開発に大きなダイナミズムを注入するの構築、私たちの生産性の解放。
トランスコーディング:などは、JavaScript、CSSにコンパイル活字体がSCSSにコンパイルされます。
ファイルの最適化:JavaScriptやCSS、HTMLコード圧縮マージ画像を圧縮します。
符号分割:あなたが許可され、非同期で書かれたいくつかのコードを実行する必要はありません。最初の画面を抽出し、共通のコード複数のページを抽出します。
マージモジュールは:モジュラープロジェクトに多くのモジュールとファイルが存在します、機能モジュールを構築する必要性が一つのファイルにマージを分類しました。
自動更新:モニターローカルのソースコードの変更は、自動的に再構築、ブラウザを更新します。
コードチェックサムが:コードは、コンプライアンスのためにチェックする必要がある前に、倉庫に提出され、テストに合格し、単位コード。
自動リリース:自動的に行にリリースコードを構築するためのコードを更新し、配信システムに送信。
分類
タスクに基づいて1、
作男、一息
彼らは自動的にその後、別のプラグインを介して処理さリソースを我慢する、組立ラインのように、割り当てられたタスクを実行します、彼らは活発なコミュニティ、豊富なプラグインが含まれている、あなたは簡単にワークフローの様々なを作成することができます。
モジュールに基づく2、
Browserify、WebPACKの、rollup.js
Node.jsの開発者がOKに必要なコンポーネントへの直接参照を必要とするこの種のツールは、このモードで、あなたはオンデマンドロード、非同期ロードモジュールを実現することができた経験はモジュールと非常に精通している必要があります持っていました
3、統合されたツール:
ヨーマン、FIS、JDF、アテナ等
達成するための技術スタックを足場さまざまなツールを使って、利点は使用が、欠点は、技術選択を制約することで、学習コストが比較的高いことです。
利点
、モジュラー処理プロジェクトに焦点を当て
完全な使いやすい、まだ柔軟な拡張機能をプラグインによって、B、
C、使用シナリオは、Web開発に限定されるものではなく、
D、コミュニティの活動家、時代に合わせて新機能の開発
E、良い開発経験