おれおれフロントエンド開発の流れ構築メモ #CSS

はじめに

最近自分がよく行うフロントエンドの開発について、環境の概要と構築手順をざっと書き出してみました。
bowerやwebpackで開発自体の速度を上げる、というより開発の全体的な流れをまとめた（インフラのような？）ものになります。

仕様

1) 案件としてよく必要になるもの

SSIによる共通ファイルのインクルード
WordPress（大抵静的ファイルとごちゃまぜ）

2) 効率化のために使いたい技術

scss/compass（必須）
ライブリロード（必須）
ファイルの一括アップロード（必須）
テンプレートエンジン（たまに）
jsの圧縮結合（たまに）
画像の最適化（たまに）

1, 2を実現させるために必要になるもの

仮想サーバ：vagrant（主に1に対応）
タスクランナー：gulp（主に2に対応）

2015/08/10追記
最近はSSIだけであれば、gulpだけでも対応できるためvagrantの使用基準は、DBを使用するかどうかで判断することが多いです。
静的サイト開発でよく使うgulpfileスニペット（初心者向け）

開発フロー

コンソールで3種類の監視行う（後述）
ローカルでファイルを作成・更新
公開用ディレクトリが自動展開
vagrantのドキュメントルートへ公開用ディレクトリが自動アップ（同期）
vagrantのドキュメントルート内の特定ファイルを監視し、自動リロード

ローカル側の環境

ファイル構成

*gitは省略

PROJECT/─┬─.vagrant
         ├─Vagrantfile
         ├─script/─base.sh
         │
         ├─_src/┬─node_modules/...
         │      ├─gulpfile.js
         │      ├─package.json
         │      └─develop_files/┬─html/...
         │                      ├─scss/...
         │                      └─js/...
         │
         └─documentRoot/┬─/common/css, js, img...
                        ├─/dir/─xxx.html...
                        ├─/wp/─xxx.php...
                        ├─.htaccess
                        └─index.html

各ディレクトリの概要

ファイル・ディレクトリ名	概要
Vagrant	Vagrantの設定ファイル。ポートフォワードや同期ディレクトリなどを設定
script/--base.sh	初回のVagrant up時に走らせるシェルスクリプト。 apacheなどのインストールや設定をもろもろ実行することで、すぐにLAMP環境を用意
_src	元データ。 gulpでhtml, scss, jsの変更を監視し、公開ディレクトリに必要なものを出力
_src/...html	htmlを格納する。 htmlはdocumentRoot/に出力。テンプレートエンジンを使うことがなければ、最初から_documentRoot/のみに置くことも
_src/...scss	scssを格納する。コンパイルされたcssはdocumentRoot/common/css/に出力
_src/...js	jsを格納する。コンパイルされたjsはdocumentRoot/common/js/に出力
_documentRoot/	公開ディレクトリ。コンパイルが不要なもの（画像やWPなど）はここに格納・ここで直接修正を行う。 vagrantのrsync機能*1でvagrantのドキュメントルートと同期

*1) windowsだと、rsync自体のインストールが別途必要となる。
また現状ローカル→仮想の一方通行なため、サーバ上で生成されたもの（例えばWPで登録したメディア、.htaccessなど）はローカルに落とさないと上書きされて消えてしまうことに注意

サーバ側の環境（vagrant）

ファイル構成

var/www/html/─┬─public_html/
              ├─node_modules/...
              ├─gulpfile.js
              └─package.json

各ディレクトリの概要

ファイル・ディレクトリ名	概要
public_html	ドキュメントルート。ローカルのdocumentRootから一方的な同期
gulpfile.js	gulpを実行すると、public_html以下の特定ファイルの更新を監視し*1、自動リロードを行う

*1) rsyncを行っているせいか、仮想サーバ以下での監視ファイル数が多いと、ライブリロード時に極端にレスポンスが遅くなったり、DBが死んだりすることがありました（特にワイルドカード指定はやばそう）。
gulpで上手いこと連続処理を避けるか、xxx.html, xxx.cssのように監視ファイルを限定した方が良いかもしれません。
連続処理の間引きについて → gulpfileスニペット

(2015.04.27 追記)
browserSyncを使ったライブリロードのメモ
gulpfileスニペット

remote_gulpfile.js

// require, watchの設定は省略
gulp.task("server", function() {
  browserSync.init({
    host: "192.168.33.10", // portは指定してもしなくてもどっちでも良い
    open: false
  });
});

↑でhostを指定すると、↓のscriptを読み込めと言われるので共通ファイル（もしくはjs）でインクルード
※browser-sync-client.2.6.5.jsの箇所は環境によって異なるかと
※portを3000から変更した場合↓の3000箇所を変更する

include.html

<script type='text/javascript' id="__bs_script__">//<![CDATA[
    document.write("<script async src='http://HOST:3000/browser-sync/browser-sync-client.2.6.5.js'><\/script>".replace("HOST", location.hostname));
//]]></script>

開発準備（コンソール）

それぞれ実行状態になるので、複数のコンソールが必要

コンソール1（仮想サーバの起動と自動同期開始）

$ cd PROJECT
$ mkdir documentRoot
$ vagrant up
$ vagrant rsync-auto
$ ...

コンソール2（ローカルのgulp:公開ファイルへの展開）

$ cd PROJECT/_src/
$ gulp
$ ...

コンソール3（仮想サーバのgulp:ファイル監視とライブリロード）

$ cd PROJECT
$ vagrant ssh
$ cd /var/www/html/
$ gulp
$ ...

おわりに

なるべく汎用性が高くなるように、設定してみました。
テンプレートエンジン、altJSや圧縮結合を行わなければ_src/html, jsはただ公開ディレクトリにコピーするだけですが、準備しておくと何かと便利です。

また一通り開発が完了した後には、vagrantの使用はやめてテストサーバを使用する流れになることが多いです。その際にはローカルのgulpfile.jsには、gulp-sftpでdocumentRoot/→テストサーバに一括アップできるようにすると楽です。*gitでpushしない場合

なおvagrantの設定ファイルは以下にまとめています。
※シェルスクリプトはあまり詳しくないのでバッチの動作は保証しませんX(
https://github.com/nekoneko-wanwan/vagrant