僕が考える最強の開発環境を作ってみた

僕が考える最強の開発環境を作ってみた

弊社では開発にvagrant,vccw,compass,gruntを利用しています。
いざ開発をしようとすると、そこにはたくさんのハードルがあります。
環境構築は時間がかかるし、自動化できるといっても設定はどうしたらいいのか、
導入を迷っている間にも無慈悲に納期は近づいてきます。
ささっと環境構築をしてやりたいことに集中できる環境を作りましょう。

vagrant VCCW導入

僕が考える最強の開発環境を作ってみた

まずはVCCWの導入です。
こちらのサイトが詳しいので参考にしてください。
WordPressをVagrant環境にらくらくインストールする。 – VCCW

必ずやっている設定

複数マシンを立ち上げる際の注意点

vagrant upするといとも簡単に仮想環境が出来上がってしまうわけですが、開発を便利にするために必ずしている設定をご紹介します。

まずはvagrant upする前に site.yml を作成し、以下の様に記述します。
ここで特に注意するのが、IPの部分です。デフォルトのままだとせっかくホスト名を変更してもIPがかぶるので上手くホスト名でアクセスができなくなってしまいます。
末尾を少しいじって仮想マシンのIPが被らないようにしましょう。
また、linked_cloneはOS部分を複数の仮想環境で共有する機能で、ディスクを節約することができます。

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フォルダに縮小された画像が出力されるという設定になっています。

まずはプラグインの導入です。

sudo npm install -g grunt-cli
sudo npm install grunt –save-dev
npm init
sudo npm install grunt-contrib-watch –save-dev
sudo npm install grunt-contrib-cssmin –save-dev
sudo npm install grunt-contrib-compass –save-dev
sudo npm install grunt-contrib-uglify –save-dev
sudo npm install grunt-contrib-concat –save-dev
sudo npm install grunt-image –save-dev
設定内容を入力すると package.jsonが作成されます(特にいじることはありません)
Gruntfile.jsという名前でファイルを作成し、以下のように編集します。

次に、出来上がった設定ファイルを見てみましょう。

Gruntfile.js

おわりに

少し長くなってしまいましたが、弊社ではこのような環境で開発をしています。
開発ではツールを使いこなすことができないとスピードを上げることはできません。
デザイナーも、エンジニアもためらわずに新しいツールに挑戦していきたいですね。

追記

※2016/11/03
最近Gruntからgulpへと以降しました。

Gulpを使ってweb制作を効率化!7つの工程で分かりやすく作業環境を構築!

Gulpでsassのコンパイルを自動化!快適な作業環境を整えよう!

PR

Instagram Feed

Load More
Something is wrong. Response takes too long or there is JS error. Press Ctrl+Shift+J or Cmd+Shift+J on a Mac.

Instagram

専務取締役

funatsukeisuke

WEBと教育を組み合わせて何かおもしろいことをやってやろうと画策しています。AWESOMEでは開発を担当、個別指導塾コミットでは塾長と2足の草鞋を履きながら日々勉強しています。

他の投稿を見る →