はじめに

趣味のプロダクトを新たに作るにあたり、PHPはそろそろ飽きてきていたので新たな言語にチャレンジしようと思い、node.jsをインストールしていじってみたのですが、なかなかこれが動作が速くてよさげだったので採用することにしました。
いろいろ勉強していくうちに、gulpとかwebpackとか便利機能が沢山あると知り、またJavaScriptによるクライアントサイドのフレームワークも多数出ているので、これらをまとめてテンプレート化してしまえないか？という挑戦の記録がこのポストになります。

やりたかったこと

• 出来るだけ構造を簡素にする
• gulpとwebpackを併用してファイル変更を検知し自動ビルド
• nodemonでサーバーサイドファイルの監視も同時に行い
• ファイル変更を検知してブラウザの自動リロード
• Vue.jsの単一ファイルコンポーネント構造を使用

出来るだけ構造を簡素にする

express+Vue.jsのテンプレートとしては、以下のようなものが見つかりました。
https://github.com/express-vue/express-vue - Vue.js公式のSSR用テンプレート
https://github.com/abusaidm/vue-express - abusaidm氏のテンプレート
上の方のテンプレートは公式だけあってがっちり作ってあるのですが、がっちり過ぎて初心者の私としてはいじくり方が分からないのと、あくまでもルーティングはexpressに任せたい（Vue.jsは描画に専念させたい）ということで、下のabusaidm氏のテンプレートを基に作っていくことにしました。

gulpとwebpackを併用して自動ビルド

最初はgulpのみでやろうと思いコードまで書いたのですが、gulp-browserifyがブラックリスト入りしていることや、gulpだけでやらせるとビルドが果てしなく重かったので、webpackを導入しました。gulpはタスクランナーに専念させます。

nodemonでサーバーサイドファイルの監視

サーバーサイドの監視もさせたいので、gulp-nodemonを使って監視させ、変更があったらサーバーを再起動させます。

ファイル変更を検知してブラウザの自動リロード

browserSyncを使います。クライアントサイドのファイルを監視させるとともに、nodemonにより再起動されたら更新作業を行わせるようにしてあるので、クライアントサイドでもサーバーサイドでもファイルを変更したらブラウザが自動リロードされます。便利。

Vue.jsの単一ファイルコンポーネントを使用

今後作成する趣味プロダクトでは、コンポーネント指向のVue.jsが合っていると感じたのでVue.jsに即決。拡張子vueの単一ファイルコンポーネントをwebpackで読み込ませてビルドできるようにしました。

できたもの

https://github.com/kaito3desuyo/express-vue-starter-template
こちら。使い方はREADMEを参照していただければ。

感想

環境構築だけで三日掛かるのはさすがに長すぎると思います。