Loading article…
gulpはオープンソースのJavaScriptツールキットで、フロントエンド Web 開発においてストリーミングビルドシステム(よりパッケージに特化したMakeに似ています)として使用されます。
これは、 Node.jsとnpm上に構築されたタスクランナーであり、ミニファイ、連結、キャッシュバスター、ユニットテスト、リンティング、最適化など、Web開発に関わる時間のかかる反復的なタスクの自動化に使用されます。 [ 6 ]
gulp は、コードオーバー設定のアプローチを使用してタスクを定義し、小さな単一目的のプラグインに依存してタスクを実行します。gulp のエコシステムには、3500 を超えるプラグインが含まれています。[ 7 ]
gulp [ 8 ]は、 Node ストリームに基づいて構築された JavaScript のビルド ツールです。これらのストリームは、パイプラインを介してファイル操作の接続を容易にします。[ 9 ] gulp はファイルシステムを読み込み、オペレーターを介して、ある単一目的のプラグインから別のプラグインに手持ちのデータをパイプし.pipe()、一度に 1 つのタスクを実行します。すべてのプラグインが処理されるまで、元のファイルは影響を受けません。元のファイルを変更するか、新しいファイルを作成するように構成できます。これにより、多数のプラグインをリンクすることで複雑なタスクを実行できるようになります。ユーザーは独自のタスクを定義するために独自のプラグインを作成することもできます。[ 10 ]構成によってタスクを実行する他のタスク ランナーとは異なり、gulp はタスクを定義するために JavaScript とコーディングの知識を必要とします。gulp はビルド システムであるため、タスクを実行するだけでなく、ある場所から別の場所にファイルをコピーしたり、コンパイル、デプロイ、通知の作成、単体テスト、リンティングなどを行うこともできます。 [ 1 ]
gulp やGruntのようなタスク ランナーは、npmではなく Node.js をベースに構築されています。これは、基本的な npm スクリプトが複数のタスクを実行する際に非効率であるためです。一部の開発者は、 npmスクリプトがシンプルで実装しやすいという理由で好むこともありますが、gulp と Grunt は、互いに、またデフォルトで提供されるスクリプトよりも多くの点で優れているようです。[ 11 ] Grunt は、ファイルを変換して一時フォルダに新しいファイルとして保存することでタスクを実行し、1 つのタスクの出力が別のタスクの入力として使用され、出力が宛先フォルダに到達するまで続きます。これには、多くのI/O呼び出しと多くの一時ファイルの作成が伴います。一方、gulp はファイルシステムを介してストリームするため、これらの一時的な場所を必要としません。これにより、I/O 呼び出しの数が減少し、パフォーマンスが向上します。[ 12 ] Grunt は設定ファイルを使用してタスクを実行しますが、gulp はビルド ファイルをコーディングする必要があります。Grunt では、各プラグインは、入力場所を前のプラグインの出力と一致させるように構成する必要があります。 gulpでは、プラグインは自動的にパイプライン化されます。[ 9 ]
gulp タスクはコマンドラインインターフェイス(CLI) [ 11 ]シェルから実行され、package.jsongulp のさまざまなプラグインをリストするために使用される とgulpfile.js(または単にgulpfile) という 2 つのファイルが必要です。これらは、ビルド ツールの慣例に従って、パッケージのソース コードのルート ディレクトリにあることが多いです。 gulpfile には、gulp がビルド タスクを実行するために必要なロジックのほとんどが含まれています。まず、必要なすべてのモジュールがロードされ、次に gulpfile でタスクが定義されます。 gulpfile で指定されたすべての必要なプラグインは、 の devDependencies セクションにリストされています。[ 13 ]デフォルトのタスクは によって実行されます。個々のタスクは gulp.task で定義でき、 によって実行されます。[ 14 ]複雑なタスクは、演算子を使用してプラグインをチェーンすることで定義されます。[ 15 ]package.json$gulpgulp <task> <othertask>.pipe()
gulpfile は、gulp ですべての操作が定義されている場所です。gulpfile の基本的な構造は、先頭に必須のプラグインがインクルードされ、タスクの定義と末尾にデフォルトタスクがあります。[ 16 ]
タスクを実行するために必要なインストール済みのプラグインは、gulpfile の先頭に次の形式で依存関係として追加する必要があります。[ 14 ] [ 15 ]
//依存関係の追加var gulp = require ( 'gulp' );次に、タスクを作成できます。gulpタスクは`gulp.task`で定義され、最初のパラメータとしてタスク名、2番目のパラメータとして関数を受け取ります。
次の例は、gulpタスクの作成を示しています。最初のパラメータtaskNameは必須であり、シェルでタスクを実行する際の名前を指定します。[ 17 ]
gulp.task ( 'taskName' , function ( ) { //何らかの処理});あるいは、あらかじめ定義された複数の機能を実行するタスクを作成することもできます。これらの機能は、配列の形式で2番目のパラメータとして渡されます。
function fn1 () { // 何らかの処理を行う}function fn2 () { // 何らかの処理を行う}// 関数名の配列を持つタスクgulp.task ( ' taskName ' , gulp.parallel ( fn1 , fn2 ) ) ; デフォルトタスクはgulpfileの末尾で定義されます。gulpシェルのコマンドで実行できます。以下の例では、デフォルトタスクは何も実行しません。[ 15 ]
// Gulp のデフォルトタスクgulp.task ( ' default ' , fn );gulp では、デフォルトタスクを使用して、上記で定義された任意の数の依存サブタスクを順番に自動的に実行します。gulp はソースファイルを監視し、ファイルに変更があった場合に適切なタスクを実行することもできます。サブタスクは、2 番目のパラメータの配列の要素として指定する必要があります。このプロセスは、gulpコマンドでデフォルトタスクを実行するだけでトリガーできます。[ 16 ]
モジュール定義は、Gulpfile.js次のように冒頭に記述できます。
var imagemin = require ( 'gulp-imagemin' );後続の画像タスクは画像を最適化します。gulp.src()ディレクトリ「images-orig/」にある拡張子.png、.gif、または.jpgのすべての画像を取得します。
.pipe(imagemin())最適化プロセスを経て見つかった画像は、最適化された画像とともに「 images/」フォルダ.pipe(gulp.dest())に保存されます。最適化がなければ画像は確かに最適化されますが、保存されません。[ 18 ]最適化された画像は別のフォルダに保存されるため、元の画像は変更されません。[ 15 ]gulp.dest()
// 画像タスクgulp.task ( ' images' , function ( ) { return gulp.src ( ' images/*.{png,gif,jpg}' ) . pipe ( imagemin ( ) ) . pipe ( gulp.dest ( ' dist /images/' )); }); 次の例では、scripts/ディレクトリ内のすべての JavaScript ファイルが最適化され.pipe(uglify())、gulp.dest('scripts/')元のファイルが出力で上書きされます。[ 19 ]そのためには、まずnpmパッケージインストーラーで必要なgulp-uglify プラグイン[ 20 ]に戻り、 gulpfileの先頭でモジュールを定義する必要があります。
//スクリプトタスクgulp.task ( ' scripts ' , function () { return gulp.src ( ' scripts/*.js' ) . pipe ( uglify ()) . pipe ( gulp.dest ( 'scripts/' )); } ) ;Watchタスクは、ファイルの変更に反応する役割を果たします。次の例では、指定されたディレクトリ内のJavaScriptファイルまたは画像のいずれかが変更されると、 scriptsとimagesという名前のタスクが呼び出されます。[ 21 ]
// ファイルが変更されたときにタスクを再実行しますgulp.task ( ' watch ' , function ( cb ) { gulp.watch ( ' scripts / js/**' , scripts ); gulp.watch ( ' images/**' , images ); cb ( ); });さらに、ウォッチタスクを使用してブラウザコンテンツの更新を実行することも可能です。[ 22 ]そのためには、多数のオプションとプラグインがあります。
