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

CI JavaScript Web製作 運用

GulpでWordPressのCI 〜設計編〜

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

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

やりたいこと

以下のような流れを実現したい。

  1. ローカルでテーマファイル(~/wordpress/wp-content/themes/[テーマ名称]/配下の.phpや.cssなど)を修正
  2. featureブランチまでpush
  3. masterにmergeする際に開発と本番で設定値が異なる箇所を置換(AdSenseやGTA設定など)
  4. masterにpush
  5. ビルドワークスペースにmasterをcloneしてbuild。その際にコメント削除、ファイル圧縮
  6. 本番環境の資源バックアップ(git管理しているものの念のため)
  7. 本番デプロイ

動作環境・前提

サーバーは各人状況が違うとは思いますが、私の動作環境をベースに考えます。
全体のタスクランナーはgulpを使う予定です。

【共通】
  • repositoryはgithub
  • 本番資源はmaster、開発資源はfeatureブランチで管理
【ローカル環境】
  • Mac OS X High Sierra
  • git version 2.20.1
  • bash
  • node v8.14.0
  • npm v6.4.1
  • gulp CLI version 2.0.1
  • gulp Local version 4.0.0
【サーバー環境(本番)】
  • レンタルサーバー
  • SFTP / SSH利用可能
  • npmが使えるかどうかは不明(動かなかったら嫌なので今回は使わない。npmが使えるならサーバー側でgulp動かしても良い気がする)

全体設計

Develop(ローカルでの開発)、Commit(masterへのpushまで)、Build(workspaceでのビルド)、Deploy(バックアップと本番へのデプロイ)の4段階で考えます。
それぞれの段階を1ジョブ(タスク)的に考え、Developは開発作業なので手作業ですが、Commitから先を自動化しようと考えてます。

wordpressでci 全体設計
 
作り始めたら色々見直し必要だと思いますが、とりあえずこれで進めてみます。
 
 
実装編を公開しました。

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

執筆者:


comment

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

関連記事

【Stinger8】gulp-phtml-simple-compでheader.phpをうまく圧縮する

Stinger8のテーマファイルをgulpのgulp-phtml-simple-compを使ってphp圧縮にかけたら、バージョンベクタの圧縮がうまくいかなかったので自分用のメモ。 参考gulp-pht …

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

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

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

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

ドローンが飛ぶGIFアニメーションを作ってみた

  上のようなドローンが飛ぶGIFアニメーションを作ったときの要点メモ。Photoshopのどのような機能を使ったかや注意すべきポイントに絞って記載。 (ドローン画像の作り方や飛んでいるよう …

CSSで背景(background-color)を斜めにする

本サイトの紹介ページのように、CSSだけで背景を斜めにします。 目次 やりたいこと HTMLとCSS ポイント やりたいこと 以下のように右斜め上を支点として回転させ、二つのイメージが同色で重なること …