N.Y.C. Tech Library

ホームページの制作テクニックや日常のハックを綴る

WEB制作

gulpで特定のファイルをpipeから除外するテクニック【環境晒し】

投稿日:2019年5月22日 更新日:

Gulp.pipeで特定のファイルを除外する

ご無沙汰してます!

最近はgulpとwebpackの勉強をしてnode.jsで開発環境を作ってました。
EJS、SCSS、JS(ES6)のモジュール化、文法チェック、コード自動修正、コード圧縮、画像圧縮、SVGスプライト・・・とやりたいこと全部入りで作ったらモジュール数が大変ヤバイことになって反省しているんですが、勉強になることも多くありました。

最後に今回作った環境を晒しておくので、コード全文はbitbacketでご覧ください。

今回は、gulpで特定のファイルをpipeから除外するテクニックをご紹介します。
このテクニックを使用すると、本来書き出されるはずだったファイルをなかったことにできます!

どんなときにpipeからファイルを弾きたい?

私がまさにぶち当たった例になるのですが、1つ目は画像圧縮です。

srcに元データを、distに圧縮データを置く想定なんですが、開発環境をスタートするたびに圧縮プロセスが走ってしまうんですね。gulp 4.xにはlastRun()という差分チェック機能があるんですが、開発環境をスタートしたときには差分チェックが効かないみたいです。軽い処理なら好きに走らせとけでいいんですが、画像圧縮は結構負担かかるので処理をスキップできないかと。

2つ目はgulp-svg-spriteSVGスプライトを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だけ抜粋します。(全文はページ最後のbitbacketでご覧ください)

先ほどに比べて簡単です。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/

反省はしている、後悔はしていない。

-WEB制作

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

9 − four =

関連記事

【lazyload】lazysizesの使い方 – 拡張編

javascript 前回はlazysizes.jsを使った基本的な遅延読み込みをご紹介しました。 連載中にバージョンが4.1.4から4.1.5になってました、メンテされてるっていいですね。 今回はl …

【lazyload】画像の遅延読み込みのメリット・デメリット

目次 画像の遅延読み込みとはメリットデメリットライブラリ・プラグインlazysizes.js(非同期読み込み)lazyload.js 1.x (jQuery依存)lazyload.js 2.x (同期 …

vueアイキャッチ

Vue初心者が和暦計算してみた【令和対応】

新元号が発表されましたね 新元号は「令和」だそうです。 大きな節目を前に気分新たな方も多いのでは? 私もこの節目をスタートダッシュにしたいと思っています。 さて、本題。 最近Vueの勉強をしていて、せ …

svgラインアニメーションを使おう

さて、皆さんsvg使ってますか? 少しとっつきにくいsvgですが、使えると表現の幅が広がります。 今回は、簡単に使えるsvgラインアニメーションをご紹介します。 svgの詳しい仕様についてはW3Cのド …

【CSS設計】今さら聞けないBEMの基本【初心者・入門】

今回は今さら聞けないBEMの基本ということで、CSS設計にまつわるエントリです。 「この要素にはなんてクラス名をつけたらいいんだ・・・」という悩みはWebコーダーが必ずぶつかる課題だと思います。 その …