Laravel Mixを使ってwordpress開発を便利にする方法

Laravel Mixを使ってwordpress開発を便利にする方法を紹介します。

Laravel Mixを使うとwebpackをよりわかりやすい記述方式で書くことができます。
そして、SASSやブラウザの自動リロードなどを簡単に設定できます。

ディレクトリ構造

root
├─ dist
├─ src
   ├─ images
   │   └─ sample.jpg
   ├─ js
   │   └─ app.js
   ├─ sass
   │   ├─ abstracts
   │   │   ├─ _variables.scss
   │   └─ app.scss
├─ .gitignore
├─ archive.php
├─ index.php
├─ header.php
├─ footer.php
├─ functions.php
├─ page.php
├─ front-page.php
├─ search.php
├─ archive.php
├─ style.css
├─ package.json
├─ webpack.mix.js

WordPressのthemesフォルダにアクセス

localを使っている場合、app>public>wp-content>themesにアクセスします。
その中にテーマのフォルダを作成して、上のフォルダとファイルを作成します。

style.css

style.cssには最低下の一行は必要です。

/* 
Theme: wordpress-one
*/

wordpressのadminへいって、テーマを適用します。

Laravel Mixをいれる

https://laravel-mix.com
上にアクセスします。
version 6の場合、https://laravel-mix.com/docs/6.0/installationのStand-Alone Projectsにやり方が書いてあります。

npm init -y

でpackage.jsonを作成します。

npm install laravel-mix --save-dev

でLaravel Mixをインストールします。

touch　webpack.mix.js

でwebpack.mix.jsを作成します。

package.jsonの設定

Laravel Mix v6の場合、
https://laravel-mix.com/docs/6.0/upgrade#update-your-npm-scripts
にpackage.jsonの記述が記載されています。
v5以前とだいぶ内容が変わっているので、各々のバージョンを確認します。

  "scripts": {
    "development": "mix",
    "watch": "mix watch",
    "watch-poll": "mix watch -- --watch-options-poll=1000",
    "hot": "mix watch --hot",
    "production": "mix --production"
  },

v6の場合は、上の通りです。

npm run watch

で監視できます。

npm run production

でミニファイバージョンを取得できます。

webpack.mix.jsの設定

// webpack.mix.js

let mix = require('laravel-mix');

mix
.options({
  processCssUrls: false,
})
.js('src/js/app.js', 'dist/js')
.sass('src/scss/app.scss', 'dist/css')
.copyDirectory('src/images', 'dist/images')
.browserSync({
  files: [
      "src/**/*",
      "dist/**/*.*"
  ],
  proxy: {
      target: "http://localhost:10014/", //ここにurl
  }
});

それぞれ説明します。

JavaScriptのバンドル

mix.js('src/js/app.js', 'dist/js')

上記はJavaScriptのバンドルです。
この一行で、
ES2015記法
モジュール
開発環境向けに圧縮
が可能です。
また、Vueを使う場合も、少しのコードを付け足すだけでOKです。

mix.js('src/app.js', 'dist').vue();

Vueのバージョンを指定したい場合は、以下のように記述します。

mix.js('src/app.js', 'dist').vue({ version: 2 });

SASSのコンパイル

mix.sass('src/scss/app.scss', 'dist/css')

この一行で、SASSが使えるようになります。

画像

mix.options({
  processCssUrls: false,
})

上記はscssファイルでbackground-imageのurlで画像を指定する場合、デフォルトのwebpackのurl操作を無効にするための記述です。

mix.copyDirectory('src/images', 'dist/images')

上記の記述によって、dist/imagesに画像をコピーするため、記述どおりのcssが出力されるようになります。

browserSync

mix.browserSync({
  files: [
      "src/**/*",
      "dist/**/*.*"
  ],
  proxy: {
      target: "http://localhost:10014/", //ここにurl
  }
});

ブラウザの自動リロードの設定です。
localを使っている場合など、targetを変更する必要がある場合は、targetのurlを自分の環境に変更します。

   proxy: {
       target: "http://my-domain.dev/",
   }

3000番の場合は、上のようにしても動きます。

PHPファイルの記述

以下は動かすために最低限必要な記述です。

functions.php

<?php
function scripts() {
  wp_register_style('style', get_template_directory_uri(). '/dist/css/app.css', [], 1, 'all');
  wp_enqueue_style('style');

  wp_enqueue_script('jquery');

  wp_register_script('app', get_template_directory_uri() . '/dist/js/app.js', ['jquery'], 1, true);
  wp_enqueue_script('app');
}

add_action('wp_enqueue_scripts', 'scripts');

front-page.php

<?php get_header(); ?>

<div class="content">
  ここにテキスト
</div>

<?php get_footer(); ?>

header.php

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>タイトル</title>

  <?php wp_head(); ?>

</head>
<body>

footer.php

<?php wp_footer(); ?>

</body>
</html>