gulpを使って作業をしていると、必ず出てくる、読み込み先と書き出し先の指定。
この指定をいろんな名前や階層に対応するために*(アスタリスク)を使ってワイルドカード的なイメージで記述する。
ずっと、これはJSの正規表現なんだと思ってましたが、いろいろ潜っていくと違うことに気が付き行き着いたのが「minmatch」なるものでした。
これは、node.jsで使うpath matchのライブラリーだそうです。
いろいろと調べてみたら、そこそこいろんなことができるみたいです。
しかし、基本は「Path/to/**/*.scss」と「!Path/to/ignore/**/*.scss」がわかっていればなんとかなるはず!
まぁ、知ってて使わないのと知らないから使えないは違うので、少し調べてみました。
パターン | マッチ | アンマッチ | 備考 |
---|---|---|---|
Path/to/*.scss | Path/to/style.scss | Path/to/home/style.scss | 同階層しか、マッチしないのだそうです *は任意の文字(複数文字もあり)がマッチする |
Path/to/*/*.scss | Path/to/home/style.scss | Path/to/style.scss Path/to/hoge/page/style.scss |
一階層したのところしかマッチしないようだす |
Path/to/**/*.scss | Path/to/style.scss Path/to/home/style.scss |
Path/to/.style.scss Path/to/.home/style.scss |
無いだろうけど、パスのに.(ドット)がつくとマッチしないらしい |
Path/to/aa?bb | Path/to/aaYbb | Path/to/aabb Path/to/aaYYbb Path/to/aa/bb |
?は任意の一文字がマッチする |
!Path/to/ignore/*.scss | Path/to/style.scss Path/to/home/style.scss |
Path/to/ignore/style.scss | これは除外するやつ! |
ここまでは、すごく基本的なところです。
gulp使うなら基本的にはここまでを理解出来てたら、多分問題ないと思います。
ここからは、もうちょっと踏み込んで見る。
ってか、いままで使ってなかったですが、知っておいたらなんか便利な時が来るかも!
って言うカンジのこと
パターン | マッチ | アンマッチ | 備考 |
---|---|---|---|
Path/to/{hoge, foo} | Path/to/hoge Path/to/foo |
Path/to/hoge/foo Path/to/hogehoge |
カンマ区切りだと、どれかがマッチになります |
Path/to/{hoge,foo/*}/pagu | Path/to/hoge/pagu Path/to/foo/a/pagu |
Path/to/foo/pagu Path/to/hoge/a/pagu |
当然のことながら、*も使えます |
Path/to/hoge{1…3} | Path/to/hoge1 Path/to/hoge2 Path/to/hoge3 |
Path/to/hoge Path/to/hoge4 |
範囲的なマッチも指定できます |
ちなみに#はコメントアウトになるのでなんにもマッチはしないので、\(バックスラッシュ)付けてエスケープしてやれば#もマッチする対象になります。
これは、minimatchというよりは、普通にプログラムを書いていたらわかるんでしょうね。
ざっとですが、まとめてみました。
いかがでしたでしょうか、これまでgulpを使っていて思い通りに行かなかったことが、細かなところに目を向けることでもうちょっと解決が早くなることもありますね。
なにか始めるときは、時間をかけてある程度は基礎を勉強したほうがいいことが、最近になってひしひしと実感している次第であります。
最近にしてやっと参考書などの本のありがたみに気付かされております。
この間、ちょっと発言したら知っている人たちが少なすぎてちょっとひきました。
おっさんなのかと・・・