screenshot

WordPressのテーマをTravis CIでビルドする。

wordpress

最近のWordPressのテーマ開発はgulpとかを使ったりするので、それを公式ディレクトリに登録するときとか本番環境で使う時には、厳密には不必要なファイルが大量に生成されたりします。

あと、npm installとかでよそから持ってきたファイルも、できればGitには登録しないほうがいいです。

そんなわけで、最近のWordPressのテーマ開発では、不要なファイルの削除とか外から持ってきたファイルを同梱するとか、そういうビルド作業が不可欠になってきました。

この記事のゴール

というわけでこの記事では、そういう一連のビルド作業をTravis CIで自動化する方法について紹介します。

ゴールは以下のような感じ。

  • テーマをmasterブランチにpushするだけでビルドが自動的に発火する。
  • node_modulesなどのテーマの動作に不要なファイルはビルドしたテーマから削除。
  • 動作に必要なサードパーティのライブラリをビルドしたテーマに自動的に放り込むが、masterブランチにはコミットしない。
  • ビルドしたテーマはrealeaseとかbuildとか別のブランチにpush

手順

以下の作業はテーマがすでにGitHub上にあるのが前提です。

Travis CIにサインアップ

右上に「Sign in with GitHub」っていうのがあるのでそれでサインアップしてください。

Travis_CI_-_Test_and_Deploy_Your_Code_with_Confidence

Travis CIのGemを作業マシンにインストール

$ gm install travis

Travis CIでテーマのリポジトリを有効化

以下のコマンドを実行するとGitHubにpushするだけでTravis CIが発火するようになります。

$ travis init

次にTravis CIで少しだけ設定を行います。

 

Travisの設定画面で以下のように「Build only if .travis.yml is present」をOnにしてください。

Settings_-_wakayama-it-carnival_wic2015_-_Travis_CI

設定画面は頑張って探してください。（説明がめんどくさかった。。。）

GitHubでアクセストークンを生成する

今回行う作業では、Travis CIから、ビルドしたテーマをみなさんのリポジトリにpushする必要があるので、そのためのアクセストークンを生成する必要があります。

アクセストークンは以下のページで生成することができます。

https://github.com/settings/tokens

許可すべき権限は以下の通り。

Edit_personal_access_token

ここで得られたトークンは失くしてしまうと再発行しないといけないので大切に保管してください。

あと万が一漏らしてしまうと、同じく再発行する必要がありますのでくれぐれも取り扱いにはご注意を。

travis.ymlに必要な情報を記述する

travis initコマンドを実行すると.travis.ymlというファイルが自動的に生成されているはずです。

そのファイルの内容を以下のように書き換えてください。

language: node_js

branches:
  only:
    - master

before_script: bash ./bin/build.sh

script:
    - ls -al style.css

after_success: bash ./bin/deploy.sh

env:
  global:
  - GH_REF: github.com/<your-name>/<your-repository>.git
  - secure: "<your-secure-env>"

最低でも以下の2行はみなさんの環境に合わせて書き換える必要があります。

  • GitHubのリポジトリのURL
  • secureの値

GitHubのリポジトリのURLは、<your-name>と<your-repository>の部分をみなさんのリポジトリに合わせて書き換えてください。

secureの値は、以下のコマンドを実行して得られた値をコピペしてください。

$ travis encrypt GH_TOKEN=xxxx

xxxxの部分は先ほど取得したGitHubのTravis用のトークンです。

ビルド用のシェルスクリプトを設置

テーマのディレクトリ内にbinというディレクトリを作って以下のような内容のビルド用のシェルスクリプトを設置してください。

この例では、ファイル名はbuild.shです。

#!/usr/bin/env bash

set -e

npm install
npm run build

あとnpm run buildでgulpが発火するように以下のようにpackage.jsonに書いておきます。

  "scripts": {
    "build": "./node_modules/gulp/bin/gulp.js",
  },

デプロイ用のシェルスクリプトを設置

デプロイ用のシェルスクリプトを設置します。

#!/usr/bin/env bash

set -e

if [[ "false" != "$TRAVIS_PULL_REQUEST" ]]; then
	echo "Not deploying pull requests."
	exit
fi

if [[ "master" != "$TRAVIS_BRANCH" ]]; then
	echo "Not on the 'master' branch."
	exit
fi

rm -rf .git
rm -r .gitignore

echo ".bowerrc
.editorconfig
.travis.yml
README.md
bin
bower.json
gulpfile.js
node_modules
package.json
tests
tmp" > .gitignore

git init
git config user.name "Travis CI"
git config user.email "travis@example.com"
git add .
git commit --quiet -m "Deploy from travis"
git push --force --quiet "https://${GH_TOKEN}@${GH_REF}" master:release > /dev/null 2>&1

これは上記の手順通りならこのままでも行けるはずですが、gitのユーザー名とメールアドレスは適当に書き換えてください。

このシェルスクリプトでは以下のような条件に一致した時に、releaseというブランチにビルドが終わったテーマをpushします。

  • プルリクエストではないこと。
  • masterブランチへのpushであること。

最初の方に記述されているこれらの条件分岐を忘れてしまうと、プルリクエストが来るたびにreleaseブランチにpushされてしまうので注意してください。

あと最後のコマンドの出力を/dev/nullに捨てていますが、これは何らかの不具合でpushに失敗した時にアクセストークンがTravis CIのログに出力されてしまうのを防ぐためです。

これもとても大切なことなので注意してください。

最後にpush

以上が完了したらcommitしてpushしてください。

その後にhttps://travis-ci.org/にアクセスするとビルドが自動的に始まるはずです。

GitHub上のreleseブランチに以下のようにビルドされたテーマがpushされたら成功です。

https://github.com/wakayama-it-carnival/wic2015/tree/release

 

以上、ここで紹介したことは以下のテーマで実装済みなので参考までにどうぞ。

https://github.com/wakayama-it-carnival/wic2015