【webpack】【Laravel】laravel-mix-pugで特定のディレクトリを再帰的にビルドする方法はないでしょうか？

Question

Laravelのプロジェクトでwebpackを使用しており、viewはpugファイルから生成しようと考えました。

pugファイルのビルドはlaravel-mix-pugライブラリを使っているのですが、特定のディレクトリ配下で再帰的にビルドする事ができません。
後述しますが、再帰的にビルドする際にディレクトリを作成する事ができない様です。

再帰的にビルドするにはどの様に設定すれば良いでしょうか？

環境について

nodebrewでnodeをインストールしています。
下記がインストールしているnode関連のバージョンです。

名前	バージョン
node	v10.14.2
npm	6.9.0

webpack周りについて

名前	バージョン
pug	2.0.3
laravel-mix	0.3.0
webpack	4.27.1
laravel-mix-pug	0.3.0

尚、webpackのバージョンはlaravel-mixのpakage.json内で設定しているバージョンです。　　

ディレクトリ構成について

Laravelでlaravel-appというプロジェクトディレクトリを作りました。
管理者用と一般ユーザー様のページがあり、adminとuserのテンプレートがそれぞれ存在する構成です。

laravel-app/resources/
├── pug
│   ├── admin
│   │   ├── auth
│   │   │   ├── email
│   │   │   │   └── reset.pug
│   │   │   ├── login.pug
│   │   │   └── passwords
│   │   │       ├── email.pug
│   │   │       └── reset.pug
│   │   ├── home.pug
│   │   └── layouts
│   │      ├── alert.pug
│   │      ├── footer.pug
│   │      ├── head.pug
│   │      ├── master-auth.pug
│   │      ├── master-guest.pug
│   │      ├── sidebar.pug
│   │      └── topbar.pug
│   └── user
│       ├── auth
│       │   └── login.pug
│       └── home.pug
└── views

設定内容

実施したい事は、laravel-app/resources/pug内のpugファイルを、同じ階層のviewsディレクトリにblade.phpとして生成したいです。
前述しました、pugからblade.phpへの変換は、laravel-pug-mixを使用します。

https://github.com/matejsvajger/laravel-mix-pug

正しく動作する事を確認できた設定

階層毎にpugの出力先を設定しました。
この場合は、想定していた通りの挙動をする事は確認済みです。
watchでも全ての階層をみてくれますので、機能自体は問題がありません。

ただし、階層が増えるほど記述が長くなるので改善をしたいです。

const mix = require('laravel-mix');
mix.pug = require('laravel-mix-pug');

mix.js('resources/js/app.js', 'public/js')
  .pug('resources/pug/admin/*.pug', 'resources/views/admin', {
    ext: '.blade.php',
    excludePath: 'resources/pug/admin'
  })
  .pug('resources/pug/admin/layouts/*.pug', 'resources/views/admin/layouts', {
    ext: '.blade.php',
    excludePath: 'resources/pug/admin/layouts'
  })
  .pug('resources/pug/admin/auth/*.pug', 'resources/views/admin/auth', {
    ext: '.blade.php',
    excludePath: 'resources/pug/admin/auth'
  })
  // 以下、階層毎に設定

参考

ライブラリのReadmeには、下記の様に設定方法が載っており、一階層の設定方法が載っていました。

https://github.com/matejsvajger/laravel-mix-pug

mix.pug('resources/assets/pug/*.pug', 'resources/assets/views', {
    ext: '.blade.php',
    excludePath: 'resources/assets/pug'
});

新しい設定

下記の様に、resources/pug/配下のファイルを対象にする様にしました。

const mix = require('laravel-mix');
mix.pug = require('laravel-mix-pug');

mix.js('resources/js/app.js', 'public/js')
  .pug('resources/pug/**/*.pug', 'resources/views', {
    ext: '.blade.php',
    excludePath: 'resources/pug'
  })

問題になっている現象

前項の新しい設定で実行すると、次の様なエラーが発生します。
エラーを読む限り、ユーザーのルートディレクトリにadmin/authをディレクトリを作成しようとしている様に見えます。

Error: EACCES: permission denied, mkdir '/admin/auth'
    at Object.mkdirSync (fs.js:753:3)
    at mkdirsSync (/Users/<ユーザー名>/Documents/<プロジェクトディレクトリ>/laravel-app/node_modules/fs-extra/lib/mkdirs/mkdirs-sync.js:31:9)
    at mkdirsSync (/Users/<ユーザー名>/Documents/<プロジェクトディレクトリ>/laravel-app/node_modules/fs-extra/lib/mkdirs/mkdirs-sync.js:36:14)
    at Object.mkdirsSync (/Users/<ユーザー名>/Documents/<プロジェクトディレクトリ>/laravel-app/node_modules/fs-extra/lib/mkdirs/mkdirs-sync.js:36:14)
    at File.makeDirectories (/Users/<ユーザー名>/Documents/<プロジェクトディレクトリ>/laravel-app/node_modules/laravel-mix/src/File.js:180:12)
    at MixPugTask.prepareAssets (/Users/<ユーザー名>/Documents/<プロジェクトディレクトリ>/laravel-app/node_modules/laravel-mix-pug/src/MixPugTask.js:170:31)
    at assets.files.map.asset (/Users/<ユーザー名>/Documents/<プロジェクトディレクトリ>/laravel-app/node_modules/laravel-mix-pug/src/MixPugTask.js:58:47)
    at Array.map (<anonymous>)
    at MixPugTask.run (/Users/<ユーザー名>/Documents/<プロジェクトディレクトリ>/laravel-app/node_modules/laravel-mix-pug/src/MixPugTask.js:58:29)
    at CustomTasksPlugin.runTask (/Users/<ユーザー名>/Documents/<プロジェクトディレクトリ>/laravel-app/node_modules/laravel-mix/src/webpackPlugins/CustomTasksPlugin.js:35:14)
    at Mix.tasks.forEach.task (/Users/<ユーザー名>/Documents/<プロジェクトディレクトリ>/laravel-app/node_modules/laravel-mix/src/webpackPlugins/CustomTasksPlugin.js:11:44)
    at Array.forEach (<anonymous>)
    at compiler.plugin.stats (/Users/<ユーザー名>/Documents/<プロジェクトディレクトリ>/laravel-app/node_modules/laravel-mix/src/webpackPlugins/CustomTasksPlugin.js:11:23)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/<ユーザー名>/Documents/<プロジェクトディレクトリ>/laravel-app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:18:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/<ユーザー名>/Documents/<プロジェクトディレクトリ>/laravel-app/node_modules/tapable/lib/Hook.js:154:20)
    at emitRecords.err (/Users/<ユーザー名>/Documents/<プロジェクトディレクトリ>/laravel-app/node_modules/webpack/lib/Compiler.js:267:22)
    at Compiler.emitRecords (/Users/<ユーザー名>/Documents/<プロジェクトディレクトリ>/laravel-app/node_modules/webpack/lib/Compiler.js:449:39)
    at emitAssets.err (/Users/<ユーザー名>/Documents/<プロジェクトディレクトリ>/laravel-app/node_modules/webpack/lib/Compiler.js:261:10)
    at hooks.afterEmit.callAsync.err (/Users/<ユーザー名>/Documents/<プロジェクトディレクトリ>/laravel-app/node_modules/webpack/lib/Compiler.js:435:14)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/<ユーザー名>/Documents/<プロジェクトディレクトリ>/laravel-app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:20:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/<ユーザー名>/Documents/<プロジェクトディレクトリ>/laravel-app/node_modules/tapable/lib/Hook.js:154:20)
    at asyncLib.forEachLimit.err (/Users/<ユーザー名>/Documents/<プロジェクトディレクトリ>/laravel-app/node_modules/webpack/lib/Compiler.js:432:27)
    at /Users/<ユーザー名>/Documents/<プロジェクトディレクトリ>/laravel-app/node_modules/neo-async/async.js:2818:7
    at done (/Users/<ユーザー名>/Documents/<プロジェクトディレクトリ>/laravel-app/node_modules/neo-async/async.js:3522:9)
    at /Users/<ユーザー名>/Documents/<プロジェクトディレクトリ>/laravel-app/node_modules/graceful-fs/graceful-fs.js:45:10
    at FSReqWrap.oncomplete (fs.js:141:20)

試した事

パブリッシュ先をresources/viewsから./resources/views/に変えてみましたが同じでした。

const mix = require('laravel-mix');
mix.pug = require('laravel-mix-pug');

mix.js('resources/js/app.js', 'public/js')
  .pug('resources/pug/**/*.pug', './resources/views', {
    ext: '.blade.php',
    excludePath: 'resources/pug'
  })

Answer 1

LaravelのBladeでpugを使うのであれば、以下のライブラリも良いかもしれません。
BKWLD/laravel-pug

Bladeと同じく、コンパイルするとビューのキャッシュファイルとして、単なるPHPファイルになるので、2回目以降のアクセスでコンパイルのコストはかからないと思います。

Comments

[hasshy]

何時もお世話になっております。
Bladeの特性についていも勉強不足で存じ上げておりませんでしたが、キャッシュされるのですね。
静的ファイルにした方が負荷が少なくなるかと思ってwebpackで対応しようとしておりましたが、それであれば問題ないかもしれません。
ありがとうございます。