2019年7月9日ご無沙汰してます!最近はgulpとwebpackの勉強をしてnode.jsで開発環境を作ってました。EJS、SCSS、JS(ES6)のモジュール化、文法チェック、コード自動修正、コード圧縮、画像圧縮、SVGスプライト・・・とやりたいこと全部入りで作ったらモジュール数が大変ヤバイことになって反省しているんですが、勉強になることも多くありました。最後に今回作った環境を晒しておくので、コード全文はbitbacketでご覧ください。今回は、gulpで特定のファイルをpipeから除外するテクニックをご紹介します。このテクニックを使用すると、本来書き出されるはずだったファイルをなかったことにできます!目次どんなときにpipeからファイルを弾きたい?through2で画像圧縮をスキップしたthrough2でcssファイルを握りつぶしたまとめ今回作った環境を晒すどんなときにpipeからファイルを弾きたい?私がまさにぶち当たった例になるのですが、1つ目は画像圧縮です。srcに元データを、distに圧縮データを置く想定なんですが、開発環境をスタートするたびに圧縮プロセスが走ってしまうんですね。4.xにはlastRun()という差分チェック機能があるんですが、開発環境をスタートしたときには差分チェックが効かないみたいです。軽い処理なら好きに走らせとけでいいんですが、画像圧縮は結構負担かかるので処理をスキップできないかと。2つ目はgulp-svg-spriteでSVGスプライトをCSSスプライトとして使用したいときです。scssを出力できるんですが、肝心の画像のパスが合ってない!cssを出力する場所を指定してやると正常なパスになります。するとdistにcssが出力されてしまう。なんども書き出してなんども消すのは嫌だし、そもそも書き出さない方法はないのかと。through2で画像圧縮をスキップしたgulpで独自の関数を実行するを参考に、through2オブジェクトを使って独自関数を書くことにしました。through2はgulpにバンドルされているのでinstallしなくてもrequireするだけで使うことができます。以下が画像圧縮をスキップしたコードの抜粋です。}}付随して色々と処理してますが、重要なのはここですね。}))第1引数のfileには今流れてきているファイルのデータが入っています。それを元にしてsrc側とdist側それぞれの画像ファイルステータスを取得して、タイムスタンプを比較しています。through2では処理の終わりに必ずcallbackを実行してあげないといけないのですが、callbackの第2引数にfileを渡さないことで流れてきたファイルがなかったことになります!補足ですが、fs.statSyncは存在しないファイルに対して行うとENOENTエラーになるので、関数を切り出してエラーを握りつぶしてます。いい書き方があったら教えてください。through2でcssファイルを握りつぶした長くなるのでsvg-spriteの記述部分は割愛してpipeだけ抜粋します。}))先ほどに比べて簡単です。file.pathの末尾が.cssだったらfileをnullにしています。svg-spriteでcssの出力先を指定しているので、cssファイルが流れてくるのですが、ここで握りつぶしてしまうので出力されることはありません!まとめ独自の処理はthrough2オブジェクトを使うと書くことができる。through2はgulpにバンドルされているのでrequireするだけで使える。through2の第一引数には流れてきているファイルが入っている。through2のコールバック第2引数にfileを渡すと次の処理へ進める。through2のコールバック第2引数のfileを消してしまえばなかったことにできる。今回作った環境を晒すhttps://bitbucket.org/mtbk4919/nyc_framework/src/master/反省はしている、後悔はしていない。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。