Gulp-アプリケーションの開発

前の章では、Gulpのインストールと、Gulpのビルドシステム、パッケージマネージャー、タスクランナー、Gulpの構造などを含むGulpの基本について学習しました。

この章では、アプリケーション開発の基本を説明します。これには、次のものが含まれます。

必要な依存関係の宣言
依存関係のタスクを作成する
タスクの実行
タスクを見る

依存関係の宣言

アプリケーションのプラグインをインストールするときは、プラグインの依存関係を指定する必要があります。依存関係は、bowerやnpmなどのパッケージマネージャーによって処理されます。

と呼ばれる1つのプラグインを取りましょう gulp-imagemin構成ファイルでその依存関係を定義します。このプラグインは、画像ファイルを圧縮するために使用でき、次のコマンドラインを使用してインストールできます-

npm install gulp-imagemin --save-dev

次のコードに示すように、構成ファイルに依存関係を追加できます。

var imagemin = require('gulp-imagemin');

上記の行にはプラグインが含まれており、という名前のオブジェクトとして含まれています imagemin。

依存関係のタスクの作成

タスクは、Gulpを構成するためのモジュラーアプローチを可能にします。依存関係ごとにタスクを作成する必要があります。これは、他のプラグインを見つけてインストールするときに合計します。Gulpタスクは次の構造になります-

gulp.task('task-name', function() {
   //do stuff here
});

ここで、「task-name」は文字列名であり、「function（）」はタスクを実行します。'gulp.task'は、関数を名前内のタスクとして登録し、他のタスクへの依存関係を指定します。

次のコードに示すように、上記で定義した依存関係のタスクを作成できます。

gulp.task('imagemin', function() {
   var img_src = 'src/images/**/*', img_dest = 'build/images';

   gulp.src(img_src)
   .pipe(changed(img_dest))
   .pipe(imagemin())
   .pipe(gulp.dest(img_dest));
});

画像はにあります src/images/**/*これはimg_srcobjectに保存されます。imageminコンストラクターによって作成された他の関数にパイプされます。srcフォルダーから画像を圧縮し、を呼び出すことでビルドフォルダーにコピーしますdest ターゲットディレクトリを表す引数を持つメソッド。

タスクの実行

Gulpファイルがセットアップされ、実行する準備が整いました。プロジェクトディレクトリで次のコマンドを使用して、タスクを実行します-

gulp imagemin

上記のコマンドを使用してタスクを実行すると、コマンドプロンプトに次の結果が表示されます-

C:\work>gulp imagemin
[16:59:09] Using gulpfile C:\work\gulpfile.js
[16:59:09] Starting 'imagemin'...
[16:59:09] Finished 'imagemin' after 19 ms
[16:59:09] gulp-imagemin: Minified 2 images (saved 80.81 kB - 16.9%)