QiNeelのビルドにgulpを使いはじめました

Cazaryで使っているビルドシステムgulpが便利すぎたので、予告どおりQiNeelでも使うことにしました。

何やってんの？

ビルドといってもQiNeelはPythonで動いているので、gulpで機械語へのコンパイルをしているわけではありません。やってるのはこのへん↓

• JSの結合・ミニファイ
• Sass→CSS変換・ミニファイ
• SVG→PNG変換・サイズ最適化
• HTMLへのCSS・JS埋め込み＆ミニファイ 
• サーバーへのデプロイ

と、かなりの作業が自動化できて思ったより便利便利。

JSの結合・ミニファイ

複数のJSファイルを1つにまとめてミニファイ。Webpackをgulpから呼び出しています。
今まではオレオレスクリプトでこのあたりの作業をやっていたのですが、いい感じにモジュール化できて便利になりました。
今は全部まとめて1つのファイルにしてるけど、その気になればある程度ページの機能ごとに2〜3個のファイルに分割出力するのも簡単。デバッグ中はミニファイなし＆ソースマップを出力とかもすぐできて便利。超便利。

functionお化けのJSだけで全部書くのはいい加減きつくなってきたので、そのうちES6とかTypeScriptとかで書いてJSに変換するかも。このへんを簡単にできるのがWebpackのいいところ。

Sass→CSS変換・ミニファイ

Sassは今までも使っていましたが、これと上のJS結合は今までサーバー上でやっていました。つまり、サーバーにはSassや結合前のJSファイルを転送して、そのあとでサーバー上でオレオレスクリプトを走らせて結合やら変換やらをやっていました。
この方式はクライアント側の負担が少なくて済むというメリットがありましたが、このあたりを全てクライアントで処理することにしました。

gulp-sassを使うので、SassをシステムにインストールしなくてもOK。サーバーのセットアップがちょっとだけ簡単になりました。

SVG→PNG変換・サイズ最適化

これも大きな変更点。今まではSVG作成後作業（PNG変換、画像サイズ最適化）を全て手作業で行っていましたが、元となるSVGさえ作ればあとは全自動でやってくれるように設定。がるぷ素敵超素敵。

HTMLへのCSS・JS埋め込み＆ミニファイ

一部のページでは、CSSやJSをHTMLに埋め込んでリクエスト数を極限まで減らしています。これはすべてのページでやっているわけではなく、QiNeelボタンのようにサーバーへの負荷やパフォーマンスの問題が懸念されるページだけです。
QiNeel自体は人気なくても（ｳｯ）人気ブログがボタンをはっつけたらすごい勢いでアクセスが来るからね。

これまでは最初から1つのHTMLファイルに埋め込んだ状態でページを作成していたのでミニファイはしていなかったのですが、やっぱり分離したほうが保守しやすいということで開発時は別ファイル、配布時は埋め込み＆ミニファイすることに。
このへんもgulpで全自動。ラクチン超ラクチン。

サーバーへのデプロイ 

以前はデプロイにはシェルスクリプトからrsyncを使っていました。gulpに変更してからもrsyncを使っていますので基本的には変わっていません。呼び出し元がgulpfile.jsに変わっただけです。

というわけで

gulpで開発効率が超アップしました。特にJSファイルなんかは更新頻度が高いので、これをモジュール化できるようになったのはかなり( ・∀・)ｲｲ!!です。まあこれはgulpというよりWebpackのおかげですが。

いまさら気づいたのかよ、というツッコミはごもっとも。一人前のがるぱーになれるように日々精進します。