目次
僕が考える最強の開発環境を作ってみた
弊社では開発にvagrant,vccw,compass,gruntを利用しています。
いざ開発をしようとすると、そこにはたくさんのハードルがあります。
環境構築は時間がかかるし、自動化できるといっても設定はどうしたらいいのか、
導入を迷っている間にも無慈悲に納期は近づいてきます。
ささっと環境構築をしてやりたいことに集中できる環境を作りましょう。
vagrant VCCW導入
まずはVCCWの導入です。
こちらのサイトが詳しいので参考にしてください。
WordPressをVagrant環境にらくらくインストールする。 – VCCW
必ずやっている設定
複数マシンを立ち上げる際の注意点
vagrant upするといとも簡単に仮想環境が出来上がってしまうわけですが、開発を便利にするために必ずしている設定をご紹介します。
まずはvagrant upする前に site.yml を作成し、以下の様に記述します。
ここで特に注意するのが、IPの部分です。デフォルトのままだとせっかくホスト名を変更してもIPがかぶるので上手くホスト名でアクセスができなくなってしまいます。
末尾を少しいじって仮想マシンのIPが被らないようにしましょう。
また、linked_cloneはOS部分を複数の仮想環境で共有する機能で、ディスクを節約することができます。
1 |
wordmoveを使ってテーマを同期
vccwにはwordmoveという、テーマファイルやデータベースを仮想環境と本番サーバ間で同期する機能がデフォルトで使うことが出来ます。
基本的な使い方はこちら
VCCWとWordMoveでWordPressの開発環境を便利に！
よく使うコマンド
リモートサーバーから全てのデータを持ってくる
wordmove pull --all
仮想環境のテーマファイルを同期する
wordmove push -t
全てのファイル、DBを送信するコマンドもありますが、なるべく使わないように運用する方が良いでしょう。
Compassの設定
CompassはSassを使って開発スピードを早めるために使っています。
使い方は以下のサイトに
全容をざっくり理解するために、Sass+Compassの覚え書き
gruntの設定
言わずとしれた、タスクランナーのgruntですが、gulpと導入を迷いましたが、vccwではデフォルトで
gruntに対応しているとのことで、こちらを選択しました。
やりたいことは
- css, jsを一つのファイルにまとめる
- 画像ファイルを縮小
gruntの導入は以下のサイトを御覧ください
「Grunt導入方法」と「便利なプラグイン」
Gruntfile.jsに設定を記述し、gruntもしくはgrunt タスク名を実行すると登録されたタスクが実行されます。
ファイルが変更された場合に実行したい場合はgrunt watchを実行すればファイルを監視してくれます。
- 今回は、dist/img/フォルダにオリジナルの画像を置いておくと、imgフォルダに縮小された画像が出力されるという設定になっています。
まずはプラグインの導入です。
次に、出来上がった設定ファイルを見てみましょう。
Gruntfile.js
1 |
おわりに
少し長くなってしまいましたが、弊社ではこのような環境で開発をしています。
開発ではツールを使いこなすことができないとスピードを上げることはできません。
デザイナーも、エンジニアもためらわずに新しいツールに挑戦していきたいですね。
追記
※2016/11/03
最近Gruntからgulpへと以降しました。
