gulp：とりあえず覚えておきたい、よく利用する基本タスクの記述サンプル 目次

1. ファイルを移動（複製）
2. ファイルを削除
3. ファイルをリネームして移動
4. ファイルを結合
5. ファイルを監視
6. CSSを圧縮
7. JavaScriptを圧縮
8. 画像を圧縮
9. タスクの実行順序を指定

1. ファイルを移動（複製）

ファイルを「src」から「public」へ移動（複製）させるタスクです。
ここでは単純にgulp.src()でファイルを指定してgulp.dest()で移動（複製）として紹介しますが、この間にいろいろな処理を記述して実行させて最終的に出力するというタスクを作ることも多いので、基本となる形のひとつだと思います。
例として下記のように記述して$ gulp copyを実行すれば、「src」内のファイルがすべて「public」へ移動（複製）されます。

gulpfile.js

var gulp = require( 'gulp' );

gulp.task('copy', function() {
  gulp.src('./src/*')
    .pipe(gulp.dest('./public/'));
});

目次へ

2. ファイルを削除

ファイルの削除するタスクで、今回は「del」モジュールを利用するので、まずは下記をコマンドに入力してモジュールをインストールします。

$ npm i -D del

※$ npm install del --save-devでも可。

次にgulpfile.jsに下記のように記述していきます。
今回は例として「public」の中にあるindex.htmlとpage.htmlを削除するというものになり、記述後に$ gulp deleteを実行すれば、「public」内の指定したファイルが削除されます。

gulpfile.js

var gulp = require( 'gulp' ),
    del = require( 'del' );

gulp.task('delete', function() {
  del([
    './public/index.html',
    './public/page.html'
  ]);
});

他にも削除したいファイルがあった場合は上記のファイル指定部分と同じように追記していけばいいのですが、これが例えば何百・何千というファイルがあった時はいちいち指定するのは面倒です…。
そのような場合は*を用いてファイル指定を./public/*のように記述することで、「public」の中にある全ファイルを対象にさせることができるので、沢山ファイル指定の記述をしなくても一行でファイルを全削除ということができます。

ただ、基本的に全ファイル削除したいけれども、何らかの理由でいくつか削除したくないファイルがある時もあります。
その場合は先ほどの./public/*に加えて削除したくないものを!を使ってファイル指定することで、そのファイルに関しては対象外（削除しない）という指定をすることができます。
例えば、下記のように記述して$ gulp deleteAllを実行した場合、基本的に「public」内の全ファイルが削除されますが、!を先頭に付けたindex.htmlに関しては削除されません。

gulpfile.js

var gulp = require( 'gulp' ),
    del = require( 'del' );

gulp.task('deleteAll', function() {
  del([
    './public/*',
    '!./public/index.html'
  ]);
});

目次へ

3. ファイルをリネームして移動

ファイルをリネームして且つ指定個所に移動するタスクで、今回は「gulp-rename」を利用するので、まずは下記をコマンドに入力してプラグインをインストールします。

$ npm i -D gulp-rename

※$ npm install gulp-rename --save-devでも可。

次にgulpfile.jsに下記のように記述していきます。
今回は例として「src」の中にあるindex.htmlをindex.phpにリネームし、その後「public」へ移動させるというもので、記述後に$ gulp renameを実行すれば動きを確認できます。

gulpfile.js

var gulp = require( 'gulp' ),
    rename = require( 'gulp-rename' );

gulp.task('rename', function() {
  gulp.src('./src/index.html')
    .pipe(rename('index.php'))
    .pipe(gulp.dest('./public/'));
});

目次へ

4. ファイルを結合

複数あるファイルをひとつのファイルに結合させるタスクで、今回は「gulp-concat」を利用するので、まずは下記をコマンドに入力してプラグインをインストールします。

$ npm i -D gulp-concat

※$ npm install gulp-concat --save-devでも可。

次にgulpfile.jsに下記のように記述していきます。
今回は例として「src」の中にある3つのCSSを結合してstyle.cssという1つのCSSにし、その後結合されたCSSを「public」へ移動させるというもので、記述後に$ gulp concatを実行すれば動きを確認できます。

gulpfile.js

var gulp = require( 'gulp' ),
    concat = require( 'gulp-concat' );

gulp.task('concat', function() {
  gulp.src([
    './src/style01.css',
    './src/style02.css',
    './src/style03.css'
  ])
  .pipe(concat('style.css'))
  .pipe(gulp.dest('./public/'));
});

目次へ

5. ファイルを監視

これまで紹介してきたものはいずれも利用したい場合にそのタスクを実行するというものでしたが、そのタスクをファイルの更新や削除が行われる度に実行させたいという時に毎回コマンドを入力するのは面倒です。
そこで便利なのがgulp.watch()で、これを利用することで指定したファイルを監視して変更があった場合にタスクを実行させるということができます。
例として下記のように記述して$ gulp watchを実行すると、「src」内にあるファイルに変更があった場合は「File ファイルのパスなど was イベント」という形でログメッセージが表示されるようになり、例えばindex.htmlの内容を書き換えて保存をすると「File index.html was changed」のように表示されます。

gulpfile.js

var gulp = require( 'gulp' );

gulp.task('watch', function() {
  gulp.watch('./src/*', function(event) {
    console.log('File ' + event.path + ' was ' + event.type);
  });
});

ここではログメッセージを表示させるサンプルを紹介しましたが、これを利用することで例えばSassが更新されたら自動でコンパイルするとか別途モジュールを組み合わせてファイルが更新されたら自動でブラウザがリロードされるなどのタスクを作成することが可能になります。

目次へ

6. CSSを圧縮

使用されることが多いプラグインのオプションなどで実装することもできますが、単純にCSSを圧縮するというタスクです。
今回は「gulp-cssmin」を利用するので、まずは下記をコマンドに入力してプラグインをインストールします。

$ npm i -D gulp-cssmin

※$ npm install gulp-cssmin --save-devでも可。

次にgulpfile.jsに下記のように記述していきます。
今回は例としてまず「src」の中にあるstyle.cssを圧縮し、その後圧縮されたCSSを「public」へ出力させるというもので、記述後に$ gulp cssminを実行すれば動きを確認できます。

gulpfile.js

var gulp = require( 'gulp' ),
    cssmin = require( 'gulp-cssmin' );

gulp.task('cssmin', function() {
  gulp.src('./src/style.css')
    .pipe(cssmin())
    .pipe(gulp.dest('./public/'));
});

上記でCSSを圧縮させ且つ特定の場所に移動させるという動きを実装できますが、できれば圧縮されていることがわかるように圧縮後はファイル名に「min」を付けたいという場合は、上で紹介した「gulp-rename」と組み合わせることで実装することができます。
「gulp-cssmin」に加え$ npm i -D gulp-renameで「gulp-rename」もインストールし、下記を記述後に$ gulp cssminを実行すれば、style.cssを圧縮 → 「min」を付けてstyle.min.cssにリネーム → 「public」に出力 という動きを確認できます。

gulpfile.js

var gulp = require( 'gulp' ),
    rename = require( 'gulp-rename' ),
    cssmin = require( 'gulp-cssmin' );

gulp.task('cssmin', function() {
  gulp.src('./src/style.css')
    .pipe(cssmin())
    .pipe(rename({suffix: '.min'}))
    .pipe(gulp.dest('./public/'));
});

目次へ

7. JavaScriptを圧縮

こちらはJavaScriptを圧縮というタスクです。
今回は「gulp-uglify」を利用するので、まずは下記をコマンドに入力してプラグインをインストールします。

$ npm i -D gulp-uglify

※$ npm install gulp-uglify --save-devでも可。

次にgulpfile.jsに下記のように記述していきます。
今回は例としてまず「src」の中にあるscript.jsを圧縮し、その後圧縮されたJSを「public」へ出力させるというもので、記述後に$ gulp jsminを実行すれば動きを確認できます。

gulpfile.js

var gulp = require( 'gulp' ),
    uglify = require( 'gulp-uglify' );

gulp.task('jsmin', function() {
  gulp.src('./src/script.js')
    .pipe(uglify())
    .pipe(gulp.dest('./public/'));
});

先ほどのCSSと同じように、できれば圧縮されていることがわかるように圧縮後はファイル名に「min」を付けたいという場合は、やはり同じく紹介した「gulp-rename」と組み合わせることで実装することができます。
「gulp-uglify」に加え$ npm i -D gulp-renameで「gulp-rename」もインストールし、下記を記述後に$ gulp jsminを実行すれば、script.jsを圧縮 → 「min」を付けてscript.min.cssにリネーム → 「public」に出力 という動きを確認できます。

gulpfile.js

var gulp = require( 'gulp' ),
    rename = require( 'gulp-rename' ),
    uglify = require( 'gulp-uglify' );

gulp.task('jsmin', function() {
  gulp.src('./src/script.js')
    .pipe(uglify())
    .pipe(rename({suffix: '.min'}))
    .pipe(gulp.dest('./public/'));
});

ちなみにこれはCSSでも同様ですが、ここへ例えば「4. ファイルを結合」で紹介した「gulp-concat」を組み合わせることで、複数のJSを結合して圧縮・リネームするというタスクをまず作成し、さらに「5. ファイルを監視」で紹介したgulp.watch()を組み合わせれば、そのタスクをJSファイルが更新される度に実行するということが可能になります。

目次へ

8. 画像を圧縮

CSSやJavaScriptだけでなく、プラグイン・モジュールを利用することで画像を圧縮してファイルサイズを減らすこともできます。今回は「gulp-imagemin」を利用するので、まずは下記をコマンドに入力してプラグインをインストールします。

$ npm i -D gulp-imagemin

※$ npm install gulp-imagemin --save-devでも可。

次にgulpfile.jsに下記のように記述していきます。
今回は例として「src/images」の中にある画像を圧縮し、その後「public」へ出力させるというもので、記述後に$ gulp imageminを実行すれば動きを確認できます。

gulpfile.js

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

gulp.task('imagemin', function() {
  gulp.src('./src/images/*')
    .pipe(imagemin())
    .pipe(gulp.dest('./public/images/'));
});

今回は複数の形式を圧縮するということで「gulp-imagemin」を紹介しましたが、何らかの理由でそれぞれ別のプラグインを使用したいという時は、例えばPNGなら「imagemin-pngquant」、SVGなら「gulp-svgmin」などのように各拡張子向けのものもあるので、それらを利用すると良いと思います。

目次へ

9. タスクの実行順序を指定

gulpのタスクは基本的に並列処理されていくので、例えば処理したいタスク順に記述したからといってそれ通りの順番でタスクが実行・完了されるというわけではありません。
もちろんすべて並列処理で問題ないというタスクばかりで構成されていることもあるのですが、普段利用していると「○○と△△というタスクが完了したら、□□のタスクを実行したい」といったように実行順序を指定したい場面がよくあります。
そんな時に便利なのが「run-sequence」で、これを利用することでタスクの実行順序を指定したり、一部タスクは並列処理でといった指定をすることができます。

先述したように実装には「run-sequence」を利用するので、まずは下記をコマンドに入力してインストールします。

$ npm i -D run-sequence

※$ npm install run-sequence --save-devでも可。

次にgulpfile.jsに下記のように記述していきます。
今回は例としてtask1 ～ task5までの5つのタスクがあるという想定で、その実行順序としてまずtask1を実行 → task1完了後にtask2 ～ task4を実行 → task2 ～ task4完了後にtask5を実行としたい場合のものになります。
記述後に今回はデフォルトタスクとして登録しているので$ gulpを実行すれば、指定した順序でタスクが実行されます。

gulpfile.js

var gulp = require('gulp'),
    runSequence = require('run-sequence');

gulp.task('default', function(callback) {
  runSequence(
    'task1',
    ['task2', 'task3', 'task4'],
    'task5',
    callback
  );
});

ちなみにここでは「run-sequence」を利用する形で紹介しましたが、gulp Ver 4.0の場合はこのようなモジュールをインストールしなくてもgulpだけ（gulp.series(), gulp.parallel()）で指定することができます。
こういった実行順序の指定はタスクによっては必須となることもあるので、gulpのみでできるようになるのはうれしいですね :)

目次へ