Q&A
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でも全ての階層をみてくれますので、機能自体は問題がありません。
ただし、階層が増えるほど記述が長くなるので改善をしたいです。
js
1const mix = require('laravel-mix'); 2mix.pug = require('laravel-mix-pug'); 3 4mix.js('resources/js/app.js', 'public/js') 5 .pug('resources/pug/admin/*.pug', 'resources/views/admin', { 6 ext: '.blade.php', 7 excludePath: 'resources/pug/admin' 8 }) 9 .pug('resources/pug/admin/layouts/*.pug', 'resources/views/admin/layouts', { 10 ext: '.blade.php', 11 excludePath: 'resources/pug/admin/layouts' 12 }) 13 .pug('resources/pug/admin/auth/*.pug', 'resources/views/admin/auth', { 14 ext: '.blade.php', 15 excludePath: 'resources/pug/admin/auth' 16 }) 17 // 以下、階層毎に設定
参考
ライブラリのReadmeには、下記の様に設定方法が載っており、一階層の設定方法が載っていました。
https://github.com/matejsvajger/laravel-mix-pug
js
1mix.pug('resources/assets/pug/*.pug', 'resources/assets/views', { 2 ext: '.blade.php', 3 excludePath: 'resources/assets/pug' 4});
新しい設定
下記の様に、resources/pug/配下のファイルを対象にする様にしました。
js
1const mix = require('laravel-mix'); 2mix.pug = require('laravel-mix-pug'); 3 4mix.js('resources/js/app.js', 'public/js') 5 .pug('resources/pug/**/*.pug', 'resources/views', { 6 ext: '.blade.php', 7 excludePath: 'resources/pug' 8 }) 9
問題になっている現象
前項の新しい設定で実行すると、次の様なエラーが発生します。
エラーを読む限り、ユーザーのルートディレクトリに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/に変えてみましたが同じでした。
js
1const mix = require('laravel-mix'); 2mix.pug = require('laravel-mix-pug'); 3 4mix.js('resources/js/app.js', 'public/js') 5 .pug('resources/pug/**/*.pug', './resources/views', { 6 ext: '.blade.php', 7 excludePath: 'resources/pug' 8 }) 9
回答1件
0
ベストアンサー
LaravelのBladeでpugを使うのであれば、以下のライブラリも良いかもしれません。
BKWLD/laravel-pug
Bladeと同じく、コンパイルするとビューのキャッシュファイルとして、単なるPHPファイルになるので、2回目以降のアクセスでコンパイルのコストはかからないと思います。
投稿2019/06/23 09:44
総合スコア4106
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/06/24 06:47