読者です 読者をやめる 読者になる 読者になる

Wordpressのブランクテーマ「Sage」を使って見た

WEBサイトの制作に Wordpressのブランクテーマ「Sage」を導入してみたので流れまとめておく。
 

roots.io

 

ちなみにターミナルとかなにそれレベルなので結構苦労した。これまではブランクテーマのBones+preprosで開発していた。

 

themble.com

Prepros :: Compile Less, Sass, CoffeeScript and much more with live browser refreshing.

 

なにぶんターミナルが良く分からないのでSassのコンパイルにはpreprosを使っていた。しきりに有料にしろと言ってくるので、これまでありがとうと思って購入したらエラーが出やすくなってだるいなって思っていた。

 

 

Sageを導入した理由は4点

  1. Bootstrapで開発したかった
  2. Sassが使いたかった
  3. 開発が継続的
  4. 何となくBonesに飽きた

 

一番参考にしたサイトは以下のサイト。というか他に日本語サイトではほとんど解説がない。

qiita.com

 

上記では、サーバーに導入するのを前提にしているみたいだったが、自分はmac上でコンパイルして、サーバーに上げてブラウザで確認なので、node.js導入部分が違うなーと思い、別に参考にしたサイト。

 

tipsbear.com

 

Bowerって何って思い調べたサイト。例えがマジで分からない。分からなかったが必要らしいので導入。

 

Java で言う MavenRuby で言う gem、 Perl で言う cpan のようなものです。

 

yosuke-furukawa.hatenablog.com

 

ちなみにgulpは何となくコンパイルしてくれるんだなと言うことで調べなかったので、ググってトップに来た記事。ちなみにSageにはコンパイルエラーが出た際に、wtchが止まってしまう対策のgulp-plumberがパッケージングされてるのでわざわざ準備しなくていいです。

liginc.co.jp

 

そもそもターミナルコマンドが分からねえよってことで

blog.nzakr.com

 

 

nodebrew、node.js、gulp、bowerの準備

まずnode.jsが入っているか調べる。macなのでターミナルを開いて以下を打ち込む。

$ node

動いたので入っていた。多分以前、Bonesを導入した時のものが残っていたんだと思う。よくわからなかったので、preprosを使うことにしたんだけど。そこでまずは削除を心見るがHomebrewで入れていたのを忘れており、直接削除を試みてなぜ消えないんだと小1時間悩む。以下で簡単に消えてくれた。

brew uninstall node

さまよっている間によく分からないけどnodebrewで管理したほうがいいよってあったのでnodebrewを入れる。

参考:初心者向け:nodebrewでNode.jsをバージョン管理し、環境を整える(MacOSX) | tipsBear

解説のままの通りにコピペしていく。上記サイト参照。

$ curl -L git.io/nodebrew | perl - setup
$ vi ~/.bash_profile
$ export PATH=$HOME/.nodebrew/current/bin:$PATH
$ source ~/.bash_profile
$ nodebrew install-binary stable

これでnode.jsの安定版(v5.11.1)が入ったわけだがこれが間違っていた。この後gulpやbower入れてコンパイルするんだが、エラーを吐き続けてくれる。きちんと要件に入っているバージョンを確認して入れましょう。

バージョンは以下で確認

sage/README.md at master · roots/sage · GitHub

Requirements

PrerequisiteHow to checkHow to install
PHP >= 5.4.x php -v php.net
Node.js 0.12.x node -v nodejs.org
gulp >= 3.8.10 gulp -v npm install -g gulp
Bower >= 1.3.12 bower -v npm install -g bower

 

確認するとv0.12.xだとv0.12.14が最も新しいようなので、それを指定して入れ、そのバージョンを使うよって指定する。

$ nodebrew install-binary v0.12.14
$ nodebrew use v0.12.14

 

最新のnpmをグローバルにインストール

$ npm install -g npm@latest

gulpとbowerをグローバルにインストール

$ npm install -g gulp bower

準備してあったSageを導入するワードプレスのテーマフォルダのパスを取得して、移動。

情報を見る > 一般情報の場所を選択してコピー
$ cd コピペ(〜/themes/になる)

テーマフォルダを作る。以下のsageの部分に好きなテーマ名をどうぞ

$ mkdir -p sage

gitからsageのテーマファイルをクローンしてもらう。

$ git clone https://github.com/roots/sage.git sage

sageフォルダに移動してnpmとbowerをインストール。

$ cd sage
$ npm install
$ bower instal

この状態でテーマデータをアップロードしても、プリコンパイルされてなくて色々ファイルが無いのでテーマが壊れていると言われるので、まずはプリコンパイルしましょう。

$ gulp

CSS変更したりした際に手動でコンパイルするのは面倒なので以下を動かせば自動でやってくれます。

$ gulp watch

node.jsのバージョンが間違ってた際に、$ gulpは問題無いのに、watchがエラー吐いてできずに2、3時間ネットをさまよい試行錯誤でした。みんな同じとこではまっているようなので、以下を参照。

 

ちなみに、異なるバージョンのnpmでwatchしても同様のエラーが出ました。複数のPCからテーマをコンパイルする際には各プログラムのバージョン確認をしましょう。

discourse.roots.io



テーマファイルをアップロードする際には、以下のファイルだけでいいと思う。多分。node_modulesとかクソ重い。

f:id:shintaro_kawase:20160605035242p:plain

多分ここまでで一通り準備は完了。

次回は開発メモ