こんにちは。
フロントエンドエンジニアをやっている、やぎといいます。

みなさま、納品時にJavascriptやCSSの圧縮作業(minify)やっていますか？
圧縮を行う理由としては色々あるでしょうが、
– ファイルサイズの軽量化
– ファイルの難読化
が主に挙げられると思います。
ただ、その圧縮に関する処理は外部パッケージ任せだったりして、実際問題として更新した箇所のみ反映しつつ圧縮されているのか気になるところだったりします。

そこで今回、圧縮されたJavascript・CSSファイルの差分情報を確認する方法についてご紹介したいと思います。
前提条件としてgitリポジトリ内で行っています。
なお、こちらのサイトを参考にさせていただきました。

js-beautifyのインストール

まずは、js-beautifyをインストールします。
js-beautifyは、難読化されたファイルを整形してくれるパッケージです。

or

gitの環境設定

次に、使用するリポジトリ上で以下のgit設定を追加します。

ここでは、”minjs”という名前でテキスト変換としてjs-beautifyをフィルタとして登録しています。

.gitattributesの追加

公開(納品)用ディレクトリ内に、”.gitattributes”ファイルを作成します。
そのファイルには下記内容を記述します。

*.js diff=min
*.css diff=min

git属性のファイルに、先ほど登録した”minjs”のdiff対象をjs, cssファイルにしています。
これで、先のgit設定を当該ディレクトリ内に対し適用できました。

それでは、コミット間の差分をgit diffでとってみると、

とこういう感じで、難読化されたファイルを整形化しつつ差分結果が表示されました。

ただ、git diffを実行しないとわからない、diffを取り損ねる場合もあるため、
package.jsonのscriptsに、圧縮実行後にログファイルを出力する処理を追加してみました。

“npm run publish:js”を実行すると、webpackでコンパイル及び圧縮を行った後、ログファイルを格納するlogディレクトリを作成。
そこにgit diffで出た結果を”dif.YYYYMMDD_HHMMSS(日付形式)”というファイル名でlogディレクトリ内に出力させています。

これで圧縮後の差分ログとして見返すこともできますね！