2014年ぼくのWordPressさいきょう高速開発ツール

2014年はじめから、不運続きで今日に至っては雪のせいでバスは直行だわジャンプも買えないだわで悲しい1日でした。全部雪のせいだ。言ってみたかっただけです。

常々考えているのが、どうやったらこの不運をはねのけられるほどの力、ようするにさいきょうになれるかなのですが、ぼくの中で結構固まってきたのでアウトプットします。(小野さんのパクリです

流れ

簡単な流れとしては、
デザイン→フロントエンド→バックエンド(デプロイ)
デザインは高速開発から除外で。

フロントエンド編

BEM

HTML、CSSおよびPSDはもうコレがないと運用ができない体質になってしまいました。冗長だけど管理が楽。

headerにあるヘッダーナビの場合、名前付けは私の場合こんな感じ header→header__nav→header__nav--list
あってるのかはわかりません。。。

Sass

Stylusを使っていたんだけど、人に渡すときにはやはりSassの方がいいかなーと思って最近はSassでCSS書いてます。ちなみにCompassはスプライトの時しか使ってません。なんにしろCompassは重い。 レスポンシブの場合にIE用に分岐してたりもできて便利。
ファイルを分けて運用。

Grunt

gulpでもいいっちゃあいいんだけど、初心者の人に説明しづらいので。 メインで使ってるのは、

  • grunt-contrib-connect
  • grunt-este-watch
  • grunt-sass
  • grunt-contrib-cssmin
  • grunt-styleguide
  • (grunt-contrib-compass)

compassはライブリロード時に引っかかるので、Libsass使ったら即時反映されるようになり、もはやスプライト要因となりました。este-watchはたまにライブリロードがかからない場合があるけど、その時はだいたいローカルサーバーのタブ開き過ぎって感じがする。 Gruntでいろいろ詰め込んで最強(さいきょうではない)だぜうわはははとかやってたんだけど、なんか熱が冷めたので残ったのはだいたい上のメンバーたちになりました。

styleDocco

Gruntと併用でスタイルガイドを自動化できるスグレモノ。
SassやらMixinやらでいろいろできる。ファイル別にスタイルガイドを作成できるので便利。レスポンシブにももちろん対応。 しかしライブリロード環境だとバグるので手動更新。ビルドしたとき、更新したとき、譲渡するときにだけ確認するものなのでライブリロードは別に必要ないんですけども。

他にもNormalize.cssとか当たり前になりつつあるものは取り入れて開発してます。

バックエンド編

Vagrant

仮想環境を立ち上げてくれるツール。だいたいはvvvやらVCCWなどのWordPressに最適化されたvagrantfileをカスタマイズして開発を行っています。ローカルネットワークの場合スマホからアクセスさせることもできるので便利。

Git

Gitがないともはや運用は不可能。GitのMasterブランチにコミットされたら自動で反映されるバッチを書いたんだけど、他にいいやつがあったので使わなかった。テンプレートファイル履歴みたいな感じ。

wordmove

WordPressをホストからローカルにデータベースごと持ってきたり、その逆をしたりするもの。ローカルで何かしらWordPressに追加したものをホストでインポートするより、wordmoveを用いたほうが運用が楽。

まとめ

なんか当たり前みたいな感じになってしまいましたけどぼくの中ではさいきょうなんです>< 一人でやるぶんには困るのは自分なんでどうでもいいんですけど、ソース渡したり、複数人で更新するという場合には出来る限りみんなにわかりやすく構成するということが、後々自分のためにもなるという認識です。それこそがいわゆるさいきょうですね(粉みかん)