質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

解決済

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

hasshy
hasshy

総合スコア1

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

1回答

0評価

1クリップ

1726閲覧

投稿2019/06/23 06:47

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

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

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

環境について

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

名前バージョン
nodev10.14.2
npm6.9.0

webpack周りについて

名前バージョン
pug2.0.3
laravel-mix0.3.0
webpack4.27.1
laravel-mix-pug0.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

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

js

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

新しい設定

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

js

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/に変えてみましたが同じでした。

js

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' })

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。