フロントエンドタスク構築のための強力なツールであるGulp.jsの使い方を詳しく説明します

概要

ソフトウェア開発において、タスクランナーの利点は明らかです。これらは、一般的な面倒なタスクを自動化するのに役立ち、優れたコードの作成など、より重要なことに集中できるようになります。本当に、画像圧縮、コードの縮小、ユニットテストなどのタスクを自動化する機能は、本当に時間を節約してくれます。

多くのフロントエンド開発者にとって、現在最も一般的に使用されているタスクマネージャーは Grunt です。これは、Gruntfile.js ファイルで JavaScript を使用してさまざまな実行タスクを定義できるツールです。基本的に、JavaScript を知っていれば、Grunt タスクの作成は非常にシンプルで簡単です。 jsHint、Sass、Uglify などの豊富なサードパーティ製プラグインにより、Grunt は最も拡張性の高いツールの 1 つとなっています。

ほとんどの人にとって、Grunt は常にタスクランナーとして選ばれてきました。しかし、最近ではGulp.jsというツールが、インストールが簡単で、設定ファイルも非常にシンプルで読みやすく管理しやすいことから注目を集めています。

Gulp.jsをインストールする

Gulp.js は、Grunt と同様に、Node をベースにしたタスク実行ツールです。したがって、実行するには Node をインストールする必要があります。オペレーティングシステムに応じて、Gulp をインストールする方法はいくつかあります。 OS X では、複数の Node.js バージョンを管理するための Tim Caswell による優れたスクリプトである nvm を使用します。公式 Node.js Web サイトからバイナリを直接ダウンロードすることもできます。 Node について何も知らない場合は、まず Nettuts+ シリーズを見て、Node.js に慣れることをお勧めします。

npm (Node パッケージマネージャー) を使用して Gulp をすばやくインストールできます。ターミナルを開いて次のように入力します:

npm インストール -g gulp

このコマンドは、npm レジストリから gulp を取得し、コマンドラインから直接アクセスできるようにシステム全体にインストールします。

gulp がインストールされたので、プロジェクトで使い始めましょう。

Gulp.jsを使用してプロジェクトを作成する

プロジェクトで Gulp を使用するには、次の重要なポイントを完了する必要があります。

2つの依存パッケージをインストールする
使用したいプラグインをインストールします
Gulp.jsファイルを作成し、実行するタスクを定義します。

Gulp が設定ファイルを使用できるように、プロジェクトパスで上記の点を完了してください。

まず、依存パッケージをインストールします。

npm をインストール --save-dev gulp gulp-util

ここで、構成ファイルで定義されたタスクを実行する Gulp プラグインをインストールする必要があります。これらのプラグインは Node パッケージなので、インストールには npm を使用します。

npm インストール --save-dev gulp-uglify gulp-concat

ここでは 2 つのプラグインをインストールしました。これにより、Uglify.js コンプレッサーを使用して JavaScript コードを縮小/圧縮し、複数の JS ファイルを 1 つのファイルにマージできるようになります。

ここで --save-dev を使用していることに注意してください。これにより、Gulp の依存関係とプラグインを現在のプロジェクトにのみインストールできます。これを行うと、package.json の devDependencies リストに各依存関係に対応するエントリが生成されます。以下のように表示されます。

{
  「devDependencies」: {
    "gulp-util": "~2.2.13",
    "gulp": "~3.5.0",
    "gulp-uglify": "~0.2.0",
    "gulp-concat": "~2.1.7"
  }
}

これにより、プロジェクトの依存関係とプラグインが npm を使用してインストールされるようになります。プロジェクトに package.json ファイルがない場合、コマンドラインで npm init と入力するか、エディターで手動で作成し、対応する中括弧を入力して、「package.json」として保存します。更新するには、コマンドラインに npm コマンドを入力します。中括弧が必要であることに注意してください。中括弧がないと、--save-dev を使用しようとすると、有効な JSON ファイルではないというエラーが npm からスローされます。

このガイドでは 2 つのプラグインのみを使用しましたが、Gulp はさまざまな機能ニーズを満たすために 200 を超えるプラグインを提供しています。

ライブリロード (gulp-livereload)
JSHint(gulp-jshint)
サス（ゴクゴク）
CoffeeScript ファイルのコンパイル (gulp-coffee)

他にもたくさんあります...

gulpfile.js の翻訳

Grunt と同様に、Gulp には gulpfile.js と呼ばれる構成ファイルがあり、タスクを実行するために必要なすべてのプラグインを定義します。このファイルはプロジェクトのルートディレクトリに作成する必要があります。

シンプルでわかりやすい構文により、gulp ファイルは非常に読みやすく理解しやすくなります。

var gulp = require('gulp')、
gutil = require('gulp-util')、
uglify = require('gulp-uglify')、
concat = require('gulp-concat');

上記のコードは、指定されたタスクを完了するためにどのプラグインを参照する必要があるかを gulp に伝えるだけです。

次に、Gulp が実行するタスクを定義する必要があります。ここでは、次の 2 つを定義します。

画像を圧縮する
JSファイルを縮小する

実行するタスクを定義するには、Gulp メソッド task() を使用します。

gulp.task('js', 関数() {
    gulp.src('./js/*.js')
        .pipe(uglify())
        .pipe(連結('all.js'))
        .pipe(gulp.dest('./js'));
});

上記のコードを見ると、参照されたプラグインで構成される混合メソッド呼び出しが使用されています。最初のメソッド task() は、現在のタスクを表す名前 (ここでは「js」と呼ばれます) と、実際の操作をカプセル化する匿名メソッドを使用します。コードを分解してみましょう:

gulp.src('./js/*.js')

src() メソッドは、圧縮する必要がある JS ファイルの場所を指定し、それを、後続の実行プラグインに渡されるドキュメント構造を含むデータストリームに変換します。これは Node.js Streams API の一部であり、Gulp が簡潔な API 構文を持つ理由の 1 つです。

.pipe(uglify())

pipe() メソッドは、src() メソッドから渡されたデータストリームを取得し、指定されたプラグインに渡します。現在の例では、プラグイン uglify がデータストリームを受信します。

.pipe(連結('all.js'))

uglify と同様に、concat プラグインは pipe() を介して渡されたデータストリームを受け取り、複数の JS ファイルを 'all.js' にマージします。

.pipe(gulp.dest('./js'));

最後に、Gulp の dest() メソッドを使用して、all.js を指定されたディレクトリに書き込みます。プロセス全体は簡潔で読みやすいです。

最後にもう 1 つ必要なことは、Gulp のデフォルトタスクを「js」を実行するように変更することです。

gulp.task('default', 関数(){
    gulp.run('js'); 
});

コマンドラインに戻り、「gulp」と入力します。Gulp は gulpfile.js ファイルを見つけ、すべての依存関係とプラグインをロードし、デフォルトのタスク「js」を実行します。最終実行結果では、ファイルが圧縮され、結合されていることがわかります。

もう少し近づいてみましょう。 Gulp には、指定されたリソースへの変更を監視できる watch() という別のメソッドが用意されています。この方法を使用すると、タスクを実行するために手動で「gulp」と入力する代わりに、リソースの変更に基づいてタスクを自動的に実行できます。

gulp.watch('./js/*', 関数() {
     gulp.run('js');
});

上記のコードが実行されると、Gulp は指定されたリソースを継続的に監視し、リソースが変更されると 'js' メソッドを再度実行します。この機能は素晴らしいです!

Gulp.jsへの移行

初めて Gulp について聞いたとき、私の最初の反応は「また素晴らしいツールだ！」でした。 Gulp.js には、タスクの構築を簡単にする魅力的な構文と API があります。 Grunt のプラグインライブラリほど豊富ではありませんが、特に多くの開発者が興味を持っている現在では、プラグインライブラリは日々成長しているようです。

以上がフロントエンドタスク構築の強力なツールであるGulp.jsの使い方ガイドの詳細な内容です。Gulp.jsの使い方ガイドの詳細については、123WORDPRESS.COMの他の関連記事にも注目してください。

以下もご興味があるかもしれません: