ぽっかめろん

ゲームとかプログラミングとか

WordPressのテーマ開発の環境を整えたお話

タイトルの通り、WordPressのテーマ開発をする機会が発生してるので、どんな環境にしたのかを備忘録的にまとめておきます。

どんな環境?

自動化にgrunt、テスト環境にVagrant
テーマ自体は_sを元に作っていくことに

gruntについて

http://gruntjs.com
いろいろと自動化してくれる凄いもの
今回は grunt-init のテンプレートとして megumiteam/iemoto を使いました。
元からいろいろと入っていて便利なので気が楽で良かったです。

grunt-contrib-watchの追加

ただファイル監視が元には無く、毎回gruntを叩くのも面倒なので別に grunt-contrib-watch を追加しました。

Gruntfile.js中のgrunt.initConfigに渡すオブジェクトに

    watch: {
      options: {
        livereload: true
      }, 
      scss: {
        files: ['sass/*.scss'], 
        tasks: ['compass', 'cssmin']
      }, 
      js: {
        files: ['js/foobar_theme.js'], 
        tasks: ['jshint', 'uglify']
      }
    }

を追加、あとは書いてある通りにloadNpmTasksを呼ぶように。
あとは LiveReloadのページからSafari拡張を入れておく。

vagrantについて

http://www.vagrantup.com
vagrant up で環境が出来る凄いやつ
環境構築スクリプトをまとめたようなものがあちこちで配布されているので、今回はそれを利用しました。
miya0001/vagrant-chef-centos-wordpress · GitHub、通称VCCWを git clone して Vagrantfile ほぼサンプルコピペして終わり。


これだけでかなり凄い感じの環境ができて凄いなと思いました(語彙力不足)