とあるエンジニアの作業ブログ

CI JavaScript Web製作 運用

GulpでWordPressのCI 〜実装編〜

投稿日:2019年1月21日 更新日:

gulpを使ったWordPressのテーマファイルCIの実装編です。

設計編はこちらを参照ください。

やりたいこと・動作環境・前提

やりたいこと・環境・バージョン

やりたいこと、バージョンなどは設計編をご覧ください。

WordPressで簡易CI 〜設計編〜

ディレクトリ構成

gulpfile.jsのあるディレクトリ構成は以下の通りです。
build_workspaceはビルド時の作業用ディレクトリです。ソースコード中の設定値で変更できます。

  • [gulp_root_dir]
    • gulpfile.js
    • package.json
    • node_module/
    • build_workspace/
      • [repository名称ディレクトリ] ←ここにrepository名称でgit cloneされる
      • [repository名称].tar.gz ←Buildタスクによりrepository名称.ta.gzという名前でアーカイブされる

利用モジュール

  • gulp
  • child_process.exec···gulpから子プロセスを生成しshellを実行するためのモジュール
  • gulp-imagemin···画像ファイルの最適化のためのモジュール
  • gulp-clean-css···CSS圧縮のためのモジュール
  • gulp-phtml-simple-comp···php圧縮のためのモジュール
  • gulp-replace···文字列置換のためのモジュール
  • gulp-ssh···資源デプロイのために本番サーバーにssh接続するためのモジュール

ソースコード

以下が最終的なgulpfile.jsとなります。
設定を外部化してないのは作ってて疲れてしまったからです。。。

 

実行方法

ここではfeatureで開発が終わったあとの、通常時(Commit→Build→Deploy)とコンフリクト発生時(Commit→コンフリクト発生!!→コンフリクト解消→Commitやり直し→Build→Deploy)のタスクの実行方法を説明します。
各タスクの詳細は次章の各タスク解説を見てください。

環境設定

各種変数設定です。

git、および作業用ディレクトリの設定

  • project_path···CI対象のローカルgitリポジトリのパスを絶対パスで指定します。
    例)
    project_path = '~/htdocs/wordpress/wp-content/themes/stinger8-child';
  • build_workspace···リモートmasterからcloneしビルドを実行するworkディレクトリです。gulpfile.jsから見てbuild_workspaceのパスを相対で指定します。
  • repository···リモートリポジトリの名称を指定します。.git部分は不要です。
  • repo_url···githubのリポジトリurlを指定します。
    例)
    repo_url = 'https://github.com/[username]/' + repository + '.git';

本番のリモートサーバーの設定

  • theme_name···ご自身が使っているテーマ名称を指定します。
    例)
    theme_name = 'stinger8-child';
  • sv_theme_dir···本番サーバーのwordpressのテーマファイルまでのパスをSSH接続したユーザーホームから相対で指定します
    例)
    sv_theme_dir = 'www/wordpress/wp-content/themes';
  • host, port, username, password···gulp-sshでssh接続するための設定です。そのままなので自分のサーバーの値を設定します

通常時

ローカルfeatureでcommitまで完了したら以下コマンドでgulpのdefaultタスクを実行します。

コンフリクト発生時

コンフリクトが発生したら、コンフリクトを解消した後にrecovery_conflictタスクを実行します。

各タスク解説

Defaultタスク

Commit、Build、Deploy全て実行するタスクです。master_repo_commit → build → deployの順で実行します。

recovery_conflictタスク

コンフリクトを解消した後にリカバリのために実行するタスクです。基本的にはdefaultタスクを実行してコンフリクトが発生した後に、リカバリのために実行する想定で作りました。
Commitフェーズのmaster_repo_commitタスクの内、一番最初のmaster_mergeタスク(masterへのfeatureのマージ)を除いて実行し、その後はbuild → deployまで実行します。

master_repo_commitタスク : Commitフェーズ

project_path変数で設定されたgitリポジトリを対象に、masterブランチへのfeatureのマージとリモートブランチへのcommitまで実施するタスクです。以下のタスクを順番に実行します。

master_mergeタスク

ローカルのmasterブランチに対してfeatureをマージします。コンフリクトが発生するとコンフリクト内容を標準出力に返しタスクを強制終了します。

replace_configタスク

本当はgulp-replaceを使って開発の設定値を本番の設定値に書き換える予定でしたが、今の所ほとんど環境差異が無いので中身を作ってません。枠としてのタスクだけ用意しました。そのうち作ります。

master_pushタスク

ローカルmasterのadd、commit、およびリモートリポジトリへのpushを実施します。pushまでうまくいったら、最後にmasterブランチでの誤作業防止のためにfeatureブランチにcheckoutします。
commitするときのメッセージは面倒だったので固定にしてしまいました。本当はfeatureのcommit IDとか外部から与えられるようにした方が良いです。

buildタスク : Buildフェーズ

Commitフェーズの次に実行するタスクです。以下のタスクを順番に実行します。

master_cloneタスク

その名の通りリモートリポジトリからgit cloneするタスクです。
build_workspace配下にリポジトリ名称でcloneされます。

imgminタスク

画像圧縮のタスクです。build_workspace/repository直下のimages/を対象に圧縮し、そのまま上書きます。
もちろん対象はbuild_workspaceにcloneされたファイルのみです。

css-compタスク

CSS圧縮のタスクです。build_workspace/repository直下の.cssを対象に圧縮し、そのまま上書きます。

php-compタスク

PHP圧縮のタスクです。build_workspace/repository直下の.phpを圧縮し、そのまま上書きます。
ただしモジュールだけで圧縮すると、header.phpのバージョンベクタが壊れてしまうので、直後にgulp-replaceで置換をかけるという苦肉の策を取っています。
詳細はこちらの記事を参照。

archiveタスク

tar圧縮するタスクです。build_workspace直下の[repository名称]ディレクトリを[repository名称].ta.gzという名前でbuild_workspace直下にアーカイブします。

deployタスク : Deployフェーズ

Buildフェーズが完了したら最後に実行するタスクです。以下のタスクを順番に実行します。

sftpタスク

Buildフェーズの最後のタスクでアーカイブした.tar.gzファイルをリモートサーバーにsftpで配置するタスクです。
sv_theme_dir変数で設定したパス直下に.tar.gzを配置します。基本的にはwordpressのwp-content/themes直下の想定です。

unarchiveタスク

sftpタスクでコピーした.ta.gzファイルを解凍してデプロイを完了させるタスクです。
ただし、そのままだと解凍したディレクトリの名称がテーマ名称になっていないので、既存のテーマディレクトリをリネーム([sv_theme]_YYYYMMDD_HHMMSI)し、その後解凍したディレクトリをsv_themeにリネームします。

-CI, JavaScript, Web製作, 運用
-, ,

執筆者:


comment

メールアドレスが公開されることはありません。

関連記事

Stinger8のサイドバーにプロフィールを表示する

Stinger8のサイドバーにプロフィールを表示します。 目次 前提 作業手順 ウィジェットにHTMLを記述 CSSで見た目を整える 前提 WordPressがインストールされている Stinger8 …

MacでのAdobeクラウドストレージ活用と作業用ディレクトリ

最近Macを買い換えた。新しいMacはStorageを256にしたのでローカルにバンバンファイルを保存するのには不安が残る。 そこで、これを機に本格的にローカルへのファイル保存をやめて、全てクラウドス …

【WordPress】アフィリエイト広告の自動出し分け

ブログに表示するアフィリエイト広告を自動で出し分けるショートコードを作りました。CSVで表示したいアフィリエイト広告を複数登録しておけば、ランダムに出し分けてくれます。 目次 処理概要 ソースコード …

【WordPress】サーバーのテーマファイルをFTPで自動バックアップ

私みたいに趣味でWordPressを使ってる人はレンタルサーバーを借りてサイトを公開していると思います。 最近のレンタルサーバーにはバックアップ機能が標準/オプションで用意されているものがほとんどです …

GulpでWordPressのCI 〜設計編〜

WordPressのテーマファイルをローカルで開発してgithubにpush、そのままサーバーまでデプロイするCIを実現しようと考えています。自分の環境とか踏まえてまずはどうやって実現するか設計しまし …