Gulp-basics

Gulp-基本

この章では、Gulpに関連するいくつかの基本を理解します。

ビルドシステムとは

ビルドシステムは、タスクの集合（集合的に*タスクランナー*と呼ばれる）と呼ばれ、反復作業を自動化します。

以下は、ビルドシステムを使用して処理できるタスクの一部のリストです-

• 前処理CSSおよびJavaScriptのコンパイル。
• サイズを縮小するためのファイルの縮小。
• ファイルを1つに連結します。
• 自動リロードのためのサーバーのトリガー。
• 展開ビルドを作成して、結果のファイルを1つの場所に保存します。

現代のフロントエンドワークフローでは、ビルドシステムは3つのコンポーネントで動作します-

• パッケージマネージャー
• プリプロセッサ
• タスクランナーとビルドツール

パッケージマネージャー

これは、インストールのアップグレード、必要な依存関係の削除、クリーンライブラリ、および開発環境で使用されるパッケージの自動化に使用されます。 パッケージマネージャの例は、 bower および npm です。

プリプロセッサ

プリプロセッサは、最適化された構文とネイティブ言語にコンパイルされる追加機能を追加することにより、効率的な現代のワークフローに非常に役立ちます。

人気のあるプリプロセッサのいくつかは-

• CSS -SASS、LESS、およびスタイラス。
• JS -CoffeeScript、LiveScript、TypeScriptなど
• HTML -マークダウン、HAML、スリム、ジェイドなど

タスクランナー

タスクランナーは、SASSからCSSへの変換などのタスクを自動化し、ファイルを縮小し、画像を最適化し、開発ワークフローで使用される他の多くのタスクを実行します。 Gulpは、最新のフロントエンド作業環境のタスクランナーの1つであり、Node上で実行されます。

プロジェクトのセットアップ

コンピューターにプロジェクトを設定するには、たとえば「work」というフォルダーを作成します。 作業フォルダには、次のサブフォルダとファイルが含まれています-

• Src -前処理されたHTMLソースファイルおよびフォルダーの場所。
• 画像-圧縮されていない画像が含まれています。
• スクリプト-複数の前処理済みスクリプトファイルが含まれています。
• スタイル-複数の前処理済みCSSファイルが含まれています。
• Build -このフォルダは、プロダクションファイルを含む自動的に作成されます。
• 画像-圧縮画像が含まれています。
• スクリプト-縮小コードを含む単一のスクリプトファイル。
• スタイル-縮小コードを含む単一のCSSファイル。
• gulpfile.js -タスクを定義するために使用される構成ファイルです。