案件テーマ開発環境 : WordPress

案件の開発環境のメモ。

WordPressの開発環境はVCCWを利用している。
テーマの構成は下記のようにしている。

案件

ツール

• CSS プリプロセッサー
  • Sass/Compass
• ドキュメンテーションツール
  • PHP
    phpDocumentor
  • CSS
    hologram
  • JavaScript
    YUI Doc
• コードインスペクション
  • WordPress
    PHP_CodeSniffer
  • JavaScript
    JSLint, JSHint
• テストツール
  • PHP
    PHPUnit(grunt-phpunit)
  • JavaScript
    Qunit(grunt-contrib-qunit)
• デプロイ
  • grunt-sftp-deploy
• 自動化ツール Grunt

フォルダ構成の例

mytheme
|
|— css                      // サードパーティーCSS
|
|- dev
    |
    |— css                  // コンパイルして mytheme/style.cssを作成
         |- _style1.scss
         |- _style2.scss
         |..
         |- _styleN.scss
         |..
         |- _style.scss

    |— js                   // grunt-contrib-concatで結合してmytheme/js/mytheme.js作成
         |- script1.js
         |- script2.js
         |..
         |- scriptN.js
                     |
                     |- tests
                          |- qunit-1.19.0.css
                          |- quint-1.19.0.js
                          |- test.html
                          |- textcase.js
    |
    |- jsdocs               // YUIDocフォルダ grunt-contrib-yuidocでJavaScrptドキュメンテーション作成
    |
    |- node_modules
    |
    |- phpcs                // PHP_CodeSniffer
    |
    |- phptests             // PHPUnit
    |
    |- phpdocs              // phpDocumentor
    |
    |- styledocs            // hologramフォルダ grunt-hologramでスタイルガイド作成
    |
    |- wpcs                 // WordPress-Coding-Standardsフォルダ
    |
    |- .ftppass             // grunt-sftp-deployのFTP情報ファイル
    |
    |- config.rg            // Compass設定ファイル(El Capitanへバージョンアップ後は使用していない 2016.02.18)           
    |
    |— Gruntfile.js         // Grunt設定ファイル
    |
    |- hologram_config.yml  // hologram設定ファイル
    |
    |— package.json         // Gruntパッケージファイル
|
|- images                   // テーマの画像 
|
|- js                       //  mytheme.jsとサードパーティーのスクリプト
|
|-- inc
     |-- class.example.php
|
|- index.php
|
|- style.css

Sass

CSSプリプロセッサー。

Sass: Syntactically Awesome Style Sheets

Sassインストール

$ sudo gem install sass

コンパイル

style.scssをコンパイルし同フォルダにstyle.cssを作成する例。

$ sass style.scss style.css

変更を監視して自動コンパイル

$ sass --watch style.scss:style.css

ctrl + Cで監視を停止する。

Compass

OS X El Capitanへバージョンアップ後はCompassは利用していない(2016.02.18)。代わりにgrunt-contrib-sassを利用している。

Sassを使ったCSS作成フレームワーク。

Compass Home | Compass Documentation
Sass/Compass のインストールと基本的な環境設定 | Web Design Leaves

インストール

$ sudo gem install compass

初期化

$ compass create --bare

contrib.rbとsassフォルダが作成される。

config.rb(Compass設定ファイル)

$ cd /path/to/mytheme/dev
$ compass create --bare

mytheme
|
|—dev
|  |— css
|  |    |— style.scss
|  |
|  |— contrib.rb
|
|—index.html
|
|- style.css

contrib.rbの設定例

// 設定
css_dir = ".."
sass_dir = “css”
// compass専用コメントの出力を停止
line_comments = false

上記例ではcompassコマンドでコンパイルするとdev/cssフォルダのモジュールファイルを除いたscssファイルをコンパイルしmythemeディレクトリへ出力する。

変更を監視して自動コンパイル

$ compass watch css/style.scss

Grunt

Grunt: The JavaScript Task Runner

Gruntはgrunt-cliのみグローバルへインストールしGrunt本体も含めた各パッケージはプロジェクトごとのフォルダへインストールする。

1. node/npmのインストール

node.js

Gruntはnode.js/npmを使う。

node.jsはサイトからpkgファイルをダウンロードしインストールする。
npmはnode.jsと一緒にインストールされる。

2. grunt command line interface(grunt-cli)をグローバルへインストール

$ sudo npm install -g grunt-cli

3. プロジェクトのフォルダへpackage.json作成

上記例では/path/to/mytheme/devへpackage.jsonを作成する。

{
  "name": "example",
  "version": "0.0.1"
}

4. プロジェクトのフォルダへGrunt本体とプラグインをインストール

grunt本体とプラグインはプロジェクトごとにプロジェクトのフォルダへインストールする。

5. Grunt本体のインストール

$ cd /path/to/mytheme/dev
$ npm install grunt --save-dev

オプション–save-devをつけてnpm installを行えばpackage.jsonのdevDependenciesへプラグイン情報が追記される。

{
  "name": "example",
  "version": "0.0.1",
  "devDependencies": {
  "grunt": "~0.4.1"
  }
}

hologram

スタイルガイド。

インストール

$ sudo gem install hologram

Gruntへ導入

$ npm install grunt-hologram --save-dev

hologram init

Gruntfile.jsを配置したフォルダで下記コマンド実行する。

$ hologram init

設定フィルhologram_config.ymlが作成される。

Gruntfile.js

Gruntfileへhologramの設定を記載する。

hologram: {
    generate: {
        options: {
            config: 'hologram_config.yml'
        },
    },
},

YUI Doc – JavaScript キュメンテーションツール

• YUIDoc – Javascript Documentation Tool
• YUIDoc Syntax Reference

インストール

npm -g install yuidocjs.

コマンド

yuidoc

Grunt + YUI DOC

yuidoc: {
    compile: {
        name: 'mytheme',
        description: 'mytheme documentation.',
        version: '0.0.1',
        url: 'http://www.example.com',
        options: {
            paths: "js",
            outdir: "jsdocs"
        }
    }
}

phpDocumentor

grunt-phpdocumentor

$ npm install grunt-phpdocumentor --save-dev

Gruntfile.js

phpdocumentor: {
    dist: {
        options: {
            directory : [ "../inc" ],
            target : "phpdocs"
        }
    }
},

grunt.loadNpmTasks('grunt-phpdocumentor');

PHPUnit

最近はGruntによる自動実行はせず下記記事のようにVCCWへログインしてテストを実行しています(追記 2016.05.12)。
案件テーマ開発環境(その2 単体テスト) : WordPress

VCCWはPHPUnitがインストール済みだがVagrantへログインせずテストするためにインストール。

SaschaGalley/grunt-phpunit

$ npm install grunt-phpunit --save-dev

Gruntfile.js

phpunit: {
    classes: {
        dir: './phptests/'
    },
    options: {
        bin: '/usr/local/bin/phpunit',
        colors: true
    }
},


grunt.loadNpmTasks('grunt-phpunit');

phpunitのパスが/usr/local/bin/phpunitの場合。

QUnit

Qunitはgrunt-contrib-qunitを使う。grunt-contrib-qunitはPhantomJSで実行される。
grunt-lib-phantomjsはgrunt-contrib-qunitと同時にインストールします。

$ npm install grunt-contrib-qunit --save-dev

QUnitはCDNから読み込むのではなくローカルに保存して読み込む。

Gruntfile.js

qunit: {
all: ["js/test/*.html"]
},

SFTPを使ったデプロイ

• thrashr888/grunt-sftp-deploy · GitHub

PHP_CodeSnifferとWordPress-Coding-Standards

下記リンクにPHP_CodeSnifferをスタンドアローンでインストールする方法が記載してある。

WordPress-Coding-Standards/WordPress-Coding-Standards

mytheme/dev/phpcs、mytheme/dev/wpcs

cd /path/to/mytheme/dev
git clone https://github.com/squizlabs/PHP_CodeSniffer.git phpcs
git clone -b master https://github.com/WordPress-Coding-Standards/WordPress-Coding-Standards.git wpcs
cd phpcs
./scripts/phpcs --config-set installed_paths ../wpcs

Gruntの設定

phpcs: {
    application: {
        src: ["../*.php"]
    },
    options: {
        bin: './phpcs/scripts/phpcs',
        standard: "WordPress"
    }
},