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

前の章では、link：/gulp/gulp_installation [Gulpのインストール]とlink：/gulp/gulp_basics [Gulpの基本]について学習しました。これには、Gulpのビルドシステム、パッケージマネージャー、タスクランナー、Gulpの構造などが含まれます。

この章では、以下を含むアプリケーション開発の基本を説明します-

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

依存関係の宣言

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

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

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));
});

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

タスクを実行する

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%)

Gulp-developing-application

目次

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

依存関係の宣言

依存関係のタスクの作成

タスクを実行する