[WP Theme Dev] Iemoto で WordPress theme の作成を始めるまでの手順を確認する

Iemoto は _s を利用したスターターキットです。

[markdown]
「[WordPress 独習の今後の課題とソース](https://www.d-wood.com/blog/2014/10/10_7019.html)」という記事を書いた後、すっかり放置していました。
プロジェクトを進めながらこのあたりをまとめてみます。

> * [_s（underscores）を読む | deadwood](https://www.d-wood.com/blog/2014/10/28_7106.html)

## インストール

バージョン番号がないので明記できないのですが、以下、Commits on Feb 18, 2017 (7375d1d44b9d91a8944a112e9432484ecde2f648) を利用しています。

> * [megumiteam/iemoto: Underscores (_s) based grunt-init template for WordPress theme.](https://github.com/megumiteam/iemoto)

grunt-init テンプレートの形式になっているので、これを `git clone` しておきます。

“`prettyprinted
% npm install -g grunt-init
% mkdir ~/.grunt-init
% git clone git@github.com:megumiteam/iemoto.git ~/.grunt-init/iemoto
“`

## プロジェクトファイルの生成

[詳細な README](https://github.com/megumiteam/iemoto/blob/master/README-ja.md) があるのでそのまま進められますね。
テンプレートを生成します。

“`prettyprinted
% mkdir wp-content/themes/my-theme
% cd mkdir wp-content/themes/my-theme
% grunt-init iemoto
Running “init:iemoto” (init) task
This task will create one or more files in the current directory, based on the
environment and the answers to a few questions. Note that answering “?” to any
question will show question-specific help and answering “none” to most questions
will leave its value blank.
Please answer the following:
[?] Project title (Iemoto) Sample project
[?] PHP function prefix (alpha and underscore characters only) (iemoto)
[?] Description (Megumi theme based on Underscores)
[?] Project homepage (https://www.digitalcube.jp/)
[?] Author name (DigitalCube Co.,Ltd)
[?] Author url (https://www.digitalcube.jp/)
[?] Use gulp? (y/N) n
[?] Do you need to make any changes to the above before continuing? (y/N) n
“`

と、ここまでで `git commit` しておくと良さそうですね。

### テンプレート作成時の初期値

`grunt-init iemoto` した際に聞かれる設問のディフォルト値は、`defaults.json` で設定できるそうです。

> デフォルト値を設定するには以下のように、defaults.json を設置し、そのファイルを編集してください。

“`prettyprinted
% cp ~/.grunt-init/iemoto/defaults.json.sample ~/.grunt-init/defaults.json
“`

## 設定

`package.json` と `Gruntfile.js` が生成されているので、必要があれば調整します。
npm パッケージをインストールします。

“`prettyprinted
% npm install
“`

以上で、セットアップ完了です。

## 開発

grunt の task が下記のように設定されていました。

“`prettyprinted
Available tasks
compass Compile Sass to CSS using Compass *
jshint Validate files with JSHint. *
watch Run predefined tasks whenever watched files change.
replace General purpose text replacement for grunt. Allows you to
replace text in files using strings, regexs or functions. *
default Alias for “jshint”, “compass”, “replace” tasks.
“`

`grunt` で Sass ファイルが Compile されます。
JavaScript は jshint が実行されるようです。
また __minify__ はされませんでした。
開発中は `grunt watch` が利用できそうです。

## 所感

### grunt/gulp task の書き換えが必要

開発進めるにあたっては、テンプレート生成後に grunt/gulp task の調整や npm の追加が必要になりそうです。
folk して大幅に書き換えるか、ごっそり置き換えるか等の検討。

### Compass に依存している

どうもテンプレートが [Compass](https://github.com/Compass/compass) に依存しているようです。
Compass は Deprecated しているので、注意が必要そう。

> style.css および editor-style.css の作成に Sass および Compass を利用していますので、事前にインストールしておいてください。

ソースを見ると、たしかに [compass が import されている](https://github.com/megumiteam/iemoto/tree/master/root/sass)ようですが、元の [_s は依存していない](https://github.com/Automattic/_s/tree/master/sass)ように見えます。
このあたりは探ってみる必要がありそう。

– npm … [iemoto/template.js at master · megumiteam/iemoto](https://github.com/megumiteam/iemoto/blob/master/template.js)
– grunt … [iemoto/Gruntfile.js at master · megumiteam/iemoto](https://github.com/megumiteam/iemoto/blob/master/root/Gruntfile.js)
– gulp … [iemoto/gulpfile.js at master · megumiteam/iemoto](https://github.com/megumiteam/iemoto/blob/master/root/gulpfile.js)

### Iemoto と _s テンプレートの違い

詳細が分かっていないので、差分を調べてみるかも。

> * [Iemoto と _s テンプレートの違い | deadwood](https://www.d-wood.com/blog/2017/05/16_8940.html)
[/markdown]