gulp.js
サーバーサイドJavaScriptビルドツール
ゴクリ
原作者エリック・ショフストール[1]
開発者ブレイン・ブブリッツ、エリック・ショフストール
初回リリース2013年9月26日; 12年前[2] （2013年9月26日）
安定版リリース
5.0.0 / 2024年3月29日; 20ヶ月前[3] ( 2024-03-29 )
リポジトリgithub.com/gulpjs/gulp
書かれたJavaScript
オペレーティング·システムLinux、macOS、Windows
プラットフォームノード.js
タイプツールキット
ライセンスMITライセンス[4] [5]
Webサイトgulpjs.com 

gulpはオープンソースの JavaScriptツールキットであり、フロントエンド Web 開発におけるストリーミングビルド システム(パッケージに重点を置いたMakeに似ています)として使用されます。

これはNode.jsとnpm上に構築されたタスクランナーであり、最小化、連結、キャッシュバスティング、ユニットテスト、リンティング、最適化など、Web開発に伴う時間のかかる反復的なタスクの自動化に使用されます。 [6]

gulpは、タスクを定義する際に「コードオーバーコンフィギュレーション」アプローチを採用し、タスクの実行には小規模で単一目的のプラグインを使用します。gulpエコシステムには、3500以上のプラグインが含まれています。[7]

概要

gulp [8]は、ノードストリーム上に構築されたJavaScriptのビルドツールです。これらのストリームは、パイプラインを介したファイル操作の接続を容易にします。[9] gulpはファイルシステムを読み取り、オペレーターを介して単一目的のプラグイン間で手持ちのデータをパイプし.pipe()、一度に1つのタスクを実行します。すべてのプラグインが処理されるまで、元のファイルは影響を受けません。元のファイルを変更するか、新しいファイルを作成するかを設定できます。これにより、多数のプラグインをリンクすることで複雑なタスクを実行できるようになります。ユーザーは独自のプラグインを作成して独自のタスクを定義することもできます。[10]設定によってタスクを実行する他のタスクランナーとは異なり、gulpではタスクを定義するためにJavaScriptとコーディングの知識が必要です。 gulpはビルドシステムであるため、タスクの実行以外にも、ある場所から別の場所へのファイルのコピー、コンパイル、デプロイ、通知の作成、ユニットテスト、リンティングなどの機能があります。[1]

タスクランナーの必要性

gulp やGruntなどのタスクランナーはnpmではなく Node.js 上に構築されています。これは、基本的な npm スクリプトは複数のタスクを実行するときに非効率的であるためです。シンプルで実装が簡単なためnpmスクリプトを好む開発者もいますが、gulp と Grunt が互いに対して、またデフォルトで提供されるスクリプトに対して優位性を持っていると思われる点が数多くあります。[11] Grunt はファイルを変換して一時フォルダに新しいファイルとして保存することでタスクを実行します。そして、あるタスクの出力が別のタスクの入力として取得され、出力が宛先フォルダに到達するまでこれを繰り返します。これには大量の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 セクションにリストされていますpackage.json。[13]デフォルトのタスクは によって実行されます$gulp。個々のタスクは gulp.task で定義でき、 によって実行されますgulp <task> <othertask>。[14]複雑なタスクは、演算子を使用してプラグインを連鎖させることによって定義されます.pipe()。[15]

gulpfileの解剖

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]これには、多数のオプションとプラグインがあります。

参照

参考文献

  1. ^ ab Jed Mao、Maximilian Schmitt、Tomasz Stryjewski、Cary Country Holt、William Lubelski (2014). Developing a Gulp Edge (第1版). Bleeding Edge Press. ISBN 978-1-939902-14-6。
  2. ^ 「バージョン1.0.0のリリース日」 。 2020年12月31日閲覧。
  3. ^ “リリース · gulpjs/gulp”. GitHub . 2020年12月31日閲覧。
  4. ^ 「GitHub上のLICENSEファイル」。GitHub 。2020年12月31日閲覧。
  5. ^ 「gulp - npmのライセンスフィールド」 。 2020年12月31日閲覧。
  6. ^ 「Building With Gulp – Smashing Magazine」Smashingmagazine.com 2014年6月11日. 2016年12月14日閲覧。
  7. ^ "gulp.jsプラグインレジストリ". Gulpjs.com . 2016年12月14日閲覧。
  8. ^ "gulpjs/gulp". GitHub . 2016年9月22日閲覧。
  9. ^ ab 「substack/stream-handbook: ストリームを使ったノードプログラムの書き方」GitHub . 2016年12月14日閲覧。
  10. ^ "gulpjs/gulp". GitHub . 2016年9月22日閲覧。
  11. ^ ab "gulpjs/gulp". GitHub . 2016年9月23日閲覧。
  12. ^ 「Gulp for Beginners」CSS-Tricks. 2015年9月1日. 2016年12月14日閲覧。
  13. ^ "install | npm ドキュメント". docs.npmjs.com . 2016年9月22日閲覧。
  14. ^ ab "gulpjs/gulp". GitHub . 2016年9月23日閲覧。
  15. ^ abcd Maynard, Travis (2015). Gulp入門. Packt Publishing Ltd. ISBN 9781784393472。
  16. ^ ab 「Gulp.js入門 - SitePoint」2014年2月10日。 2016年9月23日閲覧。
  17. ^ "gulp/API.md at 4.0 · gulpjs/gulp · GitHub". GitHub. 2016年5月12日. 2016年12月14日閲覧。
  18. ^ "Gulp.js の開始 – 最適化されたウェブサイト、自動化されたウェブサイト".マガジン.phlow.de。 2014年5月25日。 2017-06-16 のオリジナルからアーカイブ。2016 年 12 月 14 日に取得。
  19. ^ "Front-end Workflow mit Gulp - Liechtenecker". Liechtenecker.at . 2015年5月29日. 2016年12月14日閲覧。
  20. ^ "gulp-uglify". Npmjs.com . 2016年12月14日閲覧。
  21. ^ "gulp-watch". Npmjs.com . 2016年9月23日閲覧。
  22. ^ 「Browsersync + Gulp.js」。Browsersync.io . 2016年12月14日閲覧。

文学

  • ジェド・マオ、マクシミリアン・シュミット、トマシュ・ストリジェフスキ、キャリー・カントリー・ホルト、ウィリアム・ルベルスキ (2014) 『Developing a Gulp Edge』（第1版）Bleeding Edge Press. ISBN 978-1-939902-14-6。
  • Den Odell (2014). 「ビルドツールと自動化」.プロ向けJavaScript開発コーディング、機能、ツール. Apress. ISBN 978-1-4302-6268-8。
  • メイナード、トラヴィス (2015). 『Gulp入門』 . Packt Publishing Ltd. ISBN 9781784393472。
Retrieved from "https://en.wikipedia.org/w/index.php?title=Gulp.js&oldid=1263305392"