4.gulp学習ガイド

Gulp:タスク自動管理ツール前編、gulp自動化構築ツール練習プロジェクト、gulp学習ガイドGulpはGruntと同様に、自動化構築ツールでもある.GulpはUnixオペレーティングシステムのパイプ(pipe)の思想を十分に参考にしており、操作上はGruntより簡単だと考えている人が多い.Gulpはグローバルにインストールし、プロジェクトの開発ディレクトリにローカルモジュールとしてインストールする必要があります.

npm install -g gulp
npm install --save-dev gulp

gulpのインストールに加えて、異なるタスクには異なるgulpプラグインモジュールをインストールする必要があります.たとえば、次のコマンドはgulp-uglifyモジュールをインストールします.総じてgulpが提供するAPIは簡単で、プラグインによる機能カスタマイズもgulpを柔軟にしています.

npm install --save-dev gulp-uglify

プロジェクトルートディレクトリのgulpfile.jsは、Gulpのプロファイルです.gulpのプラグインの使い方を簡単に紹介します.

jshintプラグイン

GitHub gulp-jshint JSHint Options JSHint Documentation
まずインストールプラグインをダウンロードします.

npm install jshint gulp-jshint --save-dev
npm install jshint-stylish --save-dev

ルートディレクトリの下のjshintrcファイルはgulp-jshintプラグインのプロファイルです.中の各構成項目の具体的な意味はJSHint Optionsを参照してください.

gulp-load-pluginsプラグイン

一般的にgulpfile.jsのモジュールは1つずつロードする必要があります.このような一つ一つの書き方は、面倒です.gulp-load-pluginsモジュールを使用するとpackageをロードできます.jsonファイル内のすべてのgulpモジュール.

#   
npm install --save-dev gulp-load-plugins

gulp API

src()

gulpモジュールのsrc()メソッドは、データストリームを生成するために使用されます.パラメータは、処理するファイルを表し、指定したファイルはデータストリームに変換されます.パラメータはStringまたはArrayです.

dest()

dest()メソッドはパイプの出力をファイルに書き込み、これらの出力を出力し続けることができるので、複数のdest()メソッドを順次呼び出し、複数のディレクトリに出力を書き込むことができます.ディレクトリが存在しない場合は、新規作成されます.dest()メソッドは、構成オブジェクトを表す2番目のパラメータも受け入れることができる.構成オブジェクトには2つのフィールドがあります.cwdフィールドは書き込みパスのベースディレクトリを指定し、デフォルトは現在のディレクトリ、modeフィールドは書き込みファイルの権限を指定し、デフォルトは0777です.

gulp.dest('build', {
  cwd: './app',
  mode: '0644'
})

task()

task()メソッドは、特定のタスクを定義するために使用されます.最初のパラメータはタスク名で、2番目のパラメータはタスク関数です.task()メソッドは、順序で実行されるタスクのセットを指定することもできます.各タスクを厳格に順番に実行する場合は、前のタスクを後のタスクの依存モジュールに書くことができます.task()メソッドのタスク関数は、パラメータ(消去関数)として関数を受け入れることもでき、非同期タスクの実行に非常に役立ちます.タスクの名前がdefaultの場合、デフォルトのタスクであることを示し、コマンドラインにgulpコマンドを直接入力すると、タスクが実行されます.

watch()

watch()メソッドは、監視するファイルを指定するために使用されます.これらのファイルが変更されると、指定したタスクが実行されます.