これからはじめる Gulp シリーズこれからはじめるGulp（8）：delモジュールとvinyl-pathsモジュールを使ったファイルの削除

はじめに

この記事はGulp.js（全俺） Advent Calendar 2014です。

前回のこれからはじめるGulp（7）：require-dirモジュールを使ったタスク単位のファイル分割でパスを整理してrequire-dirモジュールを使いタスク単位のファイル分割を試しました。今回はdelモジュールとvinyl-pathsモジュールを使ったファイルの削除方法について勉強します。

ファイルやディレクトリを削除するdelモジュール

delモジュールはパスのパターン（glob）を使って複数のファイルやディレクトリを削除できます。globを配列に入れて渡せるので簡単に利用できます。

delモジュールのインストール

$ sudo npm install --save-dev del
Password:

> v8flags@1.0.5 install /Users/nukos/Projects/test.io/vccw/www/wordpress/wp-content/themes/test.io/node_modules/gulp/node_modules/v8flags
> node fetch.js

flags for v8 3.14.5.9 cached.
del@1.0.0 node_modules/del
├── is-path-cwd@1.0.0
├── rimraf@2.2.8
├── each-async@1.1.0 (onetime@1.0.0, setimmediate@1.0.2)
├── is-path-in-cwd@1.0.0 (is-path-inside@1.0.0)
└── globby@1.0.0 (array-differ@1.0.0, async@0.9.0, array-union@1.0.1, glob@4.3.1)

delモジュールを使ったファイル削除

delモジュールはStringをそのまま渡すかglobを配列に入れて渡すかのどちらかでファイルを削除できます。このように簡単にファイルを削除できます。

var del = require('del');

gulp.task('del', function(){
  del('directory');
  //del(['a', 'b', 'c'])
});

ご覧の通りdelモジュールだけではパイプラインでは使えません。後述のvinyl-pathsモジュールと合わせて使うとパイプラインで使えるようになります。

vinyl-pathsモジュールを使いパイプラインでdelを実行する

vinyl-pathsを使うことでパイプライン上のglobを取得したり、引数にdelモジュールを渡してdelを実行してくれる便利なモジュールです。

今回はprodディレクトリの中身をtmpディレクトリにコピーしそれを5秒後に削除するタスクを作ります。5秒後に処理するためにもうひとつgulp-waitというGulpプラグインを使います。

vinyl-pathsのインストール

$ sudo npm install --save-dev vinyl-paths
Password:

> v8flags@1.0.5 install /Users/nukos/Projects/test.io/vccw/www/wordpress/wp-content/themes/test.io/node_modules/gulp/node_modules/v8flags
> node fetch.js

flags for v8 3.14.5.9 cached.
vinyl-paths@1.0.0 node_modules/vinyl-paths
└── through2@0.6.3 (xtend@4.0.0, readable-stream@1.0.33)

waitプラグインのインストール

$ sudo npm install gulp-wait --save-dev
Password:
gulp-wait@0.0.2 node_modules/gulp-wait
└── map-stream@0.0.4

モジュールとプラグインを読み込む

インストールが済んだらdel, vinyl-pathsモジュールとgulp-waitプラグインを読み込みます。

var gulp       = require('gulp');
var path       = require('path');
var del        = require('del'); //<-
var vinylPaths = require('vinyl-paths'); //<-

//require tasks
var requireDir = require('require-dir');
var dir        = requireDir('./tasks', {recurse: true});

//gulp-plugin
var wait       = require('gulp-wait'); //<-
var connect    = require('gulp-connect');

//option
var paths = {
  srcDir : 'src',
  dstDir : 'prod'
}

ファイルをコピーして一時ファイルを作るタスク

vinyl-pathsを使った削除を試すために一時ファイルを作ります。一時ファイルはprodディレクトリの中身をtmpにコピーしたものを使います。コピーが終わってから後ほど作る削除タスクを実行したいので同期処理になるようreturnを使います。

gulp.task('copy:tmp', function(){
  var srcGlob = paths.dstDir + '/**/*';
  var dstGlob = 'tmp';

  return gulp.src( srcGlob )
    .pipe(gulp.dest( dstGlob ));
});

より複雑な同期処理を行いたい場合はこちらgulpのタスクを同期的に実行する方法がとてもわかりやすく説明されています。

コピーしたファイルをディレクトリごと削除するタスク

削除タスク（del）を作ります。delタスクはcopy:tmpの後に処理させます。パイプラインにdelayを設定しファイルがコピーされていることを確認し、5秒後にvinylPaths()にdelモジュールを渡して削除を実行します。

gulp.task('del', ['copy:tmp'], function(){
  var srcGlob = 'tmp';
  var delay   = 5000;

  gulp.src( srcGlob )
    .pipe(wait( delay ))
    .pipe(vinylPaths( del ));
});

削除タスクを実行

実行するとディレクトリとファイルがコピーされ5秒後にtmpディレクトリが削除されます。

$ gulp del
[16:18:46] Using gulpfile ~/Projects/test.io/vccw/www/wordpress/wp-content/themes/test.io/gulpfile.js
[16:18:46] Starting 'copy:tmp'...
[16:18:46] Finished 'copy:tmp' after 17 ms
[16:18:46] Starting 'del'...
[16:18:46] Finished 'del' after 4.4 ms

複数のディレクトリを削除する

複数のディレクトリを削除したい時は下記のようにgulp.dest()を連続で行い、delタスクで配列にしたglobを指定します。

gulp.task('copy:tmp', function(){
  var srcGlob  = paths.dstDir + '/**/*';
  var dstGlob1 = 'tmp1';
  var dstGlob2 = 'tmp2';
  var dstGlob3 = 'tmp3';
  var dstGlob4 = 'tmp4';

  return gulp.src( srcGlob )
    .pipe(gulp.dest( dstGlob1 ))
    .pipe(gulp.dest( dstGlob2 ))
    .pipe(gulp.dest( dstGlob3 ))
    .pipe(gulp.dest( dstGlob4 ));
});

gulp.task('del', ['copy:tmp'], function(){
  var srcGlob = ['tmp1', 'tmp2', 'tmp3', 'tmp4'];
  var delay   = 5000;

  gulp.src( srcGlob )
    .pipe(wait( delay ))
    .pipe(vinylPaths( del ));
});

まとめ

ファイルの削除とシンプルな同期実行を試すことができました。これで概ね基本的な処理を覚えられたと思います。明日はgulp-ruby-sassを使ってみたいと思います。

参考サイト

• Delete files and folders

シリーズ

1. これからはじめるGulp（0）：アドベントカレンダースケジュール
2. これからはじめるGulp（1）：bundler, rbenv, nodebrewでGulp環境を作ってみる
3. これからはじめるGulp（2）：gulp-sassを使ってSCSSをコンパイルするタスクを作ってみる
4. これからはじめるGulp（3）：gulp.watchでファイルの変更を監視しタスクを実行する
5. これからはじめるGulp（4）：gulp-connectモジュールを使ったローカルサーバの起動
6. これからはじめるGulp（5）：gulp-connectモジュールを使ったLiveReload
7. これからはじめるGulp（6）：gulp-plumberとgulp-notifyを使ったデスクトップ通知
8. これからはじめるGulp（7）：require-dirモジュールを使ったタスク単位のファイル分割
9. これからはじめるGulp（8）：delモジュールとvinyl-pathsモジュールを使ったファイルの削除
10. これからはじめるGulp（9）：Ruby版Sassが使えるgulp-ruby-sassへの乗り換え
11. これからはじめるGulp（10）：deprecatedになっていたgulp-connectからgulp-webserverへ乗り換える
12. これからはじめるGulp（11）：ブラウザ間でスクロールやクリック操作を同期できるBrowserSync
13. これからはじめるGulp（12）：gulp-imageminプラグインを使ったJPEG,PNG,GIF,SVGの最適化
14. これからはじめるGulp（13）：gulp-changedプラグインで変更されたファイルだけを処理させる
15. これからはじめるGulp（14）：gulp-cachedプラグインで変更されたSCSSファイルだけを処理させる
16. これからはじめるGulp（15）：gulp-responsiveプラグインを使ったレスポンシブイメージ作成の自動化
17. これからはじめるGulp（16）：gulp-image-resizeプラグインを使ってサムネイルやレスポンシブイメージを作る
18. これからはじめるGulp（17）：SketchTool（Sketch 3 command line tool）を使ったアートボード・スライスの書き出しとgulp-execプラグインを使ったSketchtoolの呼び出し
19. これからはじめるGulp（18）：SketchToolで何ができるのかコマンドと主要なオプションを使ってみる
20. これからはじめるGulp（19）：gulp-sketchとgulp-execを使ったSketch 3デザインデータの画像書き出し
21. これからはじめるGulp（20）：Node.jsのChild Processモジュールを使ってgulpからjekyllのbuildコマンドを実行する
22. これからはじめるGulp（21）：gulp-awspublishプラグインを使ったAmazon S3への静的Webサイトパブリッシュ
23. これからはじめるGulp（22）：gulp-iconfontとgulp-sketchを使ったアイコンフォント作成の自動化
24. これからはじめるGulp（23）：gulp-consolidateでgulp-iconfontで作ったアイコンフォントのシンボル一覧HTMLを作る
25. これからはじめるGulp（24）：gulp.spritesmithプラグインでSpriteイメージを作る
26. これからはじめるGulp（25）：Hologramとgulp-hologramでスタイルガイドを作る
27. これからはじめるGulp（26）：Sketch3のサブディレクトリ書き出しに対応したgulp-sketchを試す