KOJIKA17

タスクランナーで、WordPress を LiveReload する

WordPressのテーマを作成していて、「ブラウザがリアルタイムで更新してくれたらいいのに」と思ったことはありませんか?

LiveReloadは、何らかのファイルを保存するとブラウザが自動で更新されるツールです。
このLiveReloadを利用するとリアルタイムでブラウザが更新されるようになるため、WordPressのテーマ作成などに役立ちます。

WordPress を LiveReload

WordPressをLiveReloadすると、修正を保存した瞬間にブラウザが更新されます。
画面を並べれば、エディタとブラウザを行き来することなく、テーマの作成が楽になります。

WordPressのテーマを作成する場合、大きく2つのケースが考えられます。

  • ローカルサーバーで、WordPressを作成
  • リモートサーバーに、ファイルをアップロードして作成

どちらのケースでも、LiveReloadが可能です。
またリモートサーバーに関しては、ファイルのアップロードも__タスクランナー__を利用して、自動化します。

タスクランナー

タスクランナーは、様々な機械的な処理を実行できます。
具体的には、以下の例が挙げられます。

  • 構文チェック
  • ファイルの結合
  • 特定のフォルダ、ファイルの複製、削除
  • メタ言語のコンパイル(Jade, Sass, Less, Stylusなど)
  • HTML, JS, CSSなどをminify
  • CSS Spriteの自動生成
  • 画像最適化

上記のタスクを1つずつ実行したり、コマンド1つで全てのタスクを自動化することもできます。

過去にGruntの導入記事を書いていますので、今回もGruntを中心に紹介します。
最近話題になることの多いgulpでも、Gruntと同じようなことが可能です。

Web制作で面倒な作業を自動化するビルドツール、Grunt v0.4 入門

具体的なGruntの導入方法やターミナル、コマンドプロンプトの簡単な操作方法は、過去の記事に書いているため、割愛します。

この記事ではLiveReloadを中心に紹介しますが、さらにGruntfileを拡張して、自分の好きな環境に整えることができます。

LiveReloadの下準備

LiveReloadを行う方法はいくつかありますが、ブラウザの拡張機能を利用します。

Google Chrome Chrome Web Store - LiveReload
Firefox: LiveReload :: Add-ons for Firefox

エクステンションを導入すると、ブラウザにLiveReloadのアイコンが表示されます。

利用する場合は、LiveReloadを行いたいタブで、このアイコンをクリックして使用します。

ローカルサーバーの WordPress を LiveReload

Gruntの基礎知識とgrunt-cliのインストール、WordPressがインストールされていることを前提として進めます。
なお、ローカル環境で利用するサーバーは、MAMPやXAMPPでも何でも構いません。

基本的にGruntfileとpackage.jsonの設置場所はどこでも構いません。
今回はWordPressをインストールしている__ディレクトリの上に__、Gruntfileとpackage.jsonを設置します。

ディレクトリ構成

[root]
├[wordpress]
│ ├[wp-admin]
│ ├[wp-content]
│ ├[wp-includes]
│ ├index.php
│ └...
├Gruntfile.coffee
└package.json

Gruntfileとpackage.jsonの内容は、下記のようになっています。

Gruntfile.coffee

module.exports = (grunt) ->
  pkg = grunt.file.readJSON 'package.json'
  grunt.initConfig

    watch:
      options:
        livereload: 35729
      local:
        # 「files」のディレクトリを指定。
        # 最後の「/**」は、全てのファイルを監視
        files: './wordpress/wp-content/themes/[theme名]/**'
        tasks: ''

  for taskName of pkg.devDependencies when taskName.substring(0, 6) is 'grunt-'
    grunt.loadNpmTasks taskName

  grunt.registerTask 'default', ['watch:local']

package.json

{
  "name": "wp",
  "version": "1.0.0",
  "description": "",
  "author": "kojika17",
  "devDependencies": {
    "grunt": "^0.4.5",
    "grunt-contrib-watch": "^0.6.1"
  }
}

これらをコピペして、ディレクトリなどを指定したファイルを作成し、ターミナルをGruntfileを設置したディレクトリまで移動させます。

移動したら、ターミナルに [ npm install ] か [ npm i ] を入力し、実行。
必要なプラグインをインストールされます。

無事プラグインがインストールされると「node_modules」というディレクトリが作成されます。このディレクトリは、Gruntを利用する時に必要なファイルです。

node_modulesが作成されたら、ターミナルに [ grunt ] コマンドを入力して、「Waiting」の状態にします。

ブラウザで、ローカルのWordPressページを表示し、LiveReloadのエクステンションを起動します。

これで、任意のテーマファイルを変更すると、自動でブラウザが更新されます。

リモートサーバーの WordPress を LiveReload

リモートサーバーのLiveReloadも、ローカルサーバーで行った方法とほぼ同じですが、テーマファイルをサーバーにアップするという作業が必要になります。

このサーバーのファイルアップロードもGruntを利用して自動化します。
(gulpにも同じようなプラグインがあります)

FTP接続: grunt-ftp-deploy
SFTP接続: grunt-sftp-deploy

ローカルサーバーで利用したGruntfileまで、ターミナルで移動し、下記のコマンドを実行します。
(今回は、grunt-ftp-deployを使用)

npm i grunt-ftp-deploy --save-dev

インストールが終わったら、Gruntfileと同じ場所に、「.ftppass」というファイルを作成します。

[root]
├[wordpress]
│ ├[wp-admin]
│ ├[wp-content]
│ ├[wp-includes]
│ ├index.php
│ └...
├Gruntfile.coffee
├package.json
└.ftppass // ファイルを作成

.ftppassの中に、リモートサーバーのユーザー名とパスワードを記述します。

.ftppass

{
  "key1": {
    "username": "サーバーのユーザー名",
    "password": "サーバーのパスワード"
  }
}

Gruntfileも下記の記述のように修正します。

Gruntfile.coffee

module.exports = (grunt) ->
  pkg = grunt.file.readJSON 'package.json'
  grunt.initConfig

    # アップロードの設定
    'ftp-deploy':
      build:
        auth:
          host: 'ftp.com' # FTPサーバーのURL
          port: 21
          authKey: 'key1' # .ftppassファイルを読み込む

        # アップロードを自動化したいローカルディレクトリを指定
        # ローカルにWPを置かない時は、テーマのディレクトリだけおいて、そこを指定する方法もあります。
        src: ['./wordpress/wp-content/themes/[theme名]/']

        # リモートサーバーのディレクトリを指定
        # サーバーによってここの指定は異なります
        dest: '/www/wordpress/wp-content/themes/[theme名]/'
        exclusions: ['.DS_Store', '.ftppass'] # アップロードしたくないフォルダやファイルを設定

    watch:
      options:
        livereload: 35729
      local:
        files: './wordpress/wp-content/themes/[theme名]/**'
        tasks: ''
      remote:
        files: './wordpress/wp-content/themes/[theme名]/**'
        # ファイルを変更後、自動的にファイルがアップロードされるように、'ftp-deploy'をタスクにセット
        tasks: 'ftp-deploy' 

  for taskName of pkg.devDependencies when taskName.substring(0, 6) is 'grunt-'
    grunt.loadNpmTasks taskName

  grunt.registerTask 'default', ['watch:local']

  # 新たにタスク名を設定
  grunt.registerTask 'remote', ['watch:remote']

これで設定は終わりです。

あとはGruntfileのある場所までターミナルを移動。
下記のコマンドを入力し、実行します。

grunt remote

ターミナルが「Waiting」の状態になったら、リモートサーバーのURLを開き、LiveReloadのエクステンションを起動。
ローカルにあるWordPressのテーマを保存するだけで、テーマをリモートサーバーにアップロードし、ブラウザが自動的に更新されます。

リモートサーバーの注意点

上記の画像でもわかりますが、ファイルがアップロードされてから、LiveReloadが走ります。そのためアップロードするファイル数が多いと、LiveReloadの時間がかかってきます。
LiveReloadの時間を短縮させるためには、Gruntfileのexclusionsに、アップロードしないファイルを設定するなどの工夫が必要になります。

なお、アップロードの機能は一度設定してしまえば、アップロードが自動化されるため、他の場所に間違ってアップロードすることはなくなります。
しかしFTP(SFTP)のプラグインを初めて利用する前には、設定を間違うと、違うディレクトリに、ファイルをアップロードしてしまう可能性があるため、ファイルを上書きしても問題ないサーバーで、必ずテストを行ってください

最後に

Grunt, gulpなどのタスクランナーの紹介で「Sassをコンパイル」「JSをまとめる」などよく見かけるため、別の視点から使い方を提示してみました。
タイトルや内容でもWordPressに限定した紹介になっていますが、この方法はWordPressに限らず、他のCMSや静的のページを作成する時にも応用がきく方法です。

Gruntやgulpなどのタスクランナーや、黒い画面など、何かを学ぶきっかけになれば幸いです。