MEMO2017-09-24Gulpで本番・開発環境を切り分ける方法の一つGulpを使用している際に、本番・開発環境の切り分けをしたいと思うと、EJSは簡単に出来るのだが、SassやJSに関しては直接的な方法ではちょっと面倒。Sass/JSに関してはEJSで出来る範囲の方法で行うという形が一番楽なのかなと思った。以下その方法をまとめておく。環境概要GulpEJSSass(SCSS)Browserifyの使用の有無はどちらでもEJS(HTML)の切り分けminimistを使用して本番・開発環境によってコンパイル時に異なるデータをEJSに渡す。.pipe(gulp.dest(paths.dest));});といった感じで書き、developなのかreleaseなのかによって引っ張ってくるコンフィグファイルを分ける。-%>みたいな感じで切り分ける。Sass(SCSS)の切り分け前述のEJSでの切り分けを基本的に利用。泥臭いやり方だけど、そもそもCSSは本番・開発環境で切り分けが必要な場合が少ない。経験したパターンとしては和文WEBフォントを使用する予定の場合に、開発環境ではWEBフォントが適用出来ないのでfont-face等を記述したCSSファイルを読み込む必要がある、といったパターン程度。その程度なので前述の泥臭い方法でも全然問題はない。問題が出てきたらその時に考えればいい。JSの切り分けEJSに、下のような記述をする。%>;</script>グローバルスコープに設定ファイルの中身を保持しているCONFIG変数を用意し、そこに直接ぶち込んでしまう。しておけば、後はどうとでもなる。本番環境用コード}みたいな書き方で切り分けるだけなので、開発用のコードがそのまま本番環境でも残ってしまうこと。ファイルのサイズを出来るだけ削りたい状況や、開発環境用コードが残っているとまずい場合は他の方法を考えたほうが良い。