gulp:特定のディレクトリやファイルを対象から除外する方法

gulp:特定のディレクトリやファイルを対象から除外する方法

gulpを使っていると基本的には指定した全てのファイルで処理を実行してほしいけれど、一部ファイルに関しては実行してほしくないという時があります。そんな時に使える特定のディレクトリやファイルを対象から除外する方法で、簡易的なものであれば特にプラグイン等も必要なく実装できます。

!(エクスクラメーションマーク)を使う

結論から書くと、除外したいディレクトリやファイルのパス指定前に!(エクスクラメーションマーク)を記述すれば除外指定することができます。
何らかの理由でこのファイルはLintさせないとか開発時にしか使用しないディレクトリ・ファイルを公開用にgulp.dest()するのに含めないとかいろいろ使う場面はありますが、そのような時にgulp.src()などで指定するパス前に!を記述すれば、特定のディレクトリ・ファイルを除外指定できます。

実際の使用例

上記だけだとさすがにあれなので具体的な使用例を紹介します。
今回は例として「gulp-ejs」を使ったタスクで!を使用(EJSの説明や使い方などは省略)してみます。

例では以下のようなファイル構成のものを使用していると想定し、理由については後述しますが予め「include」内にあるejsには頭に_(アンダーバー)を付けておきます。
タスク実行時の動きとしては、「include」内にある_header.ejs_footer.ejsがそれぞれindex.ejspage.ejsにインクルードされ、最終的にindex.htmlpage.htmlとなって「dist」に出力される動きを作っていきます。

├── src
│   └── ejs
│       ├── index.ejs
│       ├── page.ejs
│       └── include
│           ├── _header.ejs
│           └── _footer.ejs
├── dist ← ここに index.html と page.html を出力したい
└── gulpfile.js

何も除外しない場合

違いが分かるように、とりあえず特に除外指定せず単純にejsをhtmlに変換して出力するというタスクを作ってみます。

gulpfile.js

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

gulp.task('ejs', function() {
  gulp.src('src/ejs/**/*.ejs')
      .pipe(ejs({}, {ext: '.html'}))
      .pipe(gulp.dest('dist'))
});

上記をgulpfile.jsに記述後にコマンドで$ gulp ejsを実行すれば、「dist」(なければディレクトリが作成される)に「include」内にあった各インクルードファイルも読み込んだindex.ejsindex.htmlとなって生成されているのを確認できると思います。(page.htmlも同様)

ただ、この方法だと全てのejsが対象となっているために、「dist」には出力する必要がない「include」内の各ファイルも同じくhtmlとなって出力されてしまいます。
今回の場合は「dist」に出力してほしいのはindex.ejspage.ejsだけをhtmlに変換したものになるので、そのような時に以下で紹介する除外方法を使うことで意図した形で出力させることができます。

! と _ を組み合わせる

冒頭で!をディレクトリやファイルのパス前に記述することで除外指定できることを紹介しましたが、これを除外したいものひとつひとつに指定をするのは非常に手間です…。
そこで便利なのがファイル名に意図的につけておいた_で、これを!と組み合わせることによって、全てのファイルで処理を実行したとしても一部ファイルは処理が行われないというタスクを容易に実装することができます。

先ほど紹介したタスクでは「include」内にあるejsも「dist」へ出力されてしまってましたが、上記を踏まえて以下のように記述すれば「include」内にあったファイルは「dist」へと出力されなくなります。

gulpfile.js

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

gulp.task('ejs', function() {
  gulp.src(['src/ejs/**/*.ejs', '!src/ejs/**/_*.ejs'])
      .pipe(ejs({}, {ext: '.html'}))
      .pipe(gulp.dest('dist'))
});

上記をgulpfile.jsに記述後に同じくコマンドで$ gulp ejsを実行すれば、「dist」に先ほどと同様に各インクルードファイルを読み込んだindex.ejspage.ejsがhtmlとなって生成されているのを確認できますが、先ほど「include」内にあったファイルはもちろん、「include」ディレクトリ自体が出力されていないのを確認できます。

動きとしてはまずgulp.src()内でsrc/ejs/**/*.ejsと記述することで全ejsを対象とするのですが、その後に!_を使って'!src/ejs/**/_*.ejs'と記述することで_から始まるejsファイルを対象外にするという指定となり、その結果「include」内にある_が先頭についていたファイルが出力されないようになります。

今回の例ではejsに_を付ける形になっていますが、ディレクトリの方に付ける形でも実装はできる(パスの記述は少し変更してください)ので、好みやレギュレーションによって変更するということも可能です。

ちなみに除外指定するパスですが、もし確実にこの先もディレクトリ・ファイル名が変更されないとかこのディレクトリ・ファイルだけというように限定的にしたい場合はもちろんそのパスをきっちり記述しても問題ないですが、このサンプルで使用しているようにsrc/ejs/**/_*.ejsなどのようにしておくと、例えば後日「include」というディレクトリ名を変更したとか新しいディレクトリ・ファイルが作られたという場合もその都度gulp.src()を変更するというのをほぼなくすことができるのでいろいろと楽だと思います。

また、_を使うのもこうしなくてはいけないというわけではもちろんなく、今回例で使用しているejsで説明すると_を使用する方が指定も楽ですし、「dist」に出力するディレクトリ・ファイルかどうかもパッと見でわかるよう管理もできたりするので、自分は普段からこの指定方法がほとんどです。

もう少しシンプルに指定する #1

出力結果は同じ、こちらも出力したくないファイル名の先頭には_をそれぞれ付けておく必要がありますが、先ほどのように簡易的なものなのであれば以下のように!(_)という指定方法を使ってgulp.src()内にパス指定をひとつだけ記述する形でもファイルを除外させることができます。

gulpfile.js

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

gulp.task('ejs', function() {
  gulp.src('src/ejs/**/!(_)*.ejs')
      .pipe(ejs({}, {ext: '.html'}))
      .pipe(gulp.dest('dist'))
});

もう少しシンプルに指定する #2

こちらもgulp.src()内にパス指定をひとつだけ記述する形でファイルを除外させることができますが、!ではなく正規表現を利用した方法です。
基本的に除外する際は!を利用していますが、こんな方法もあるということで…。

gulpfile.js

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

gulp.task('ejs', function() {
  gulp.src('src/ejs/**/[^_]*.ejs')
      .pipe(ejs({}, {ext: '.html'}))
      .pipe(gulp.dest('dist'))
});

以上、ちょっと無駄に長くなってしまいましたが、gulpで特定のディレクトリ・ファイルを対象から除外する方法でした。
普段からgulpを多用している人なら当たり前かもですが、これから使ってみようと思っている人は使用頻度も高いと思うので、「除外したいディレクトリやファイルのパス指定前に!を記述し、それを場合によっては_と組み合わせるとより便利」と覚えておくとどこかで利用できると思います。

Back to Top

NxWorld

Sorry... doesn't support your browser

To get the best possible experience using our site we recommend that you upgrade to a modern web browser.NxWorldではご利用中のブラウザサポートはしていません。
Internet Explorerのアップグレード行う、もしくはその他のブラウザを使用しての閲覧をお願いします。