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

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

ただいまの
回答率

89.19%

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

解決済

回答 1

投稿

  • 評価
  • クリップ 1
  • VIEW 674

hasshy

score 79

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'
  })
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

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

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

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

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

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

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

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

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/06/24 15:47

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

    キャンセル

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

  • ただいまの回答率 89.19%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

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

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