Laravel6以降で必須なNode.js
筆者自身も詳しくはないのですが、Laravel6以降ではPHP言語のフレームワークなのに、なぜかJavascriptの実行環境であるNode.jsが無いと、Webアプリ作成に支障があるようです。
リソースファイルは何処へ
ディレクトリ構造はRuby on Railsより少し複雑で、リソースファイルを設置するディレクトリが2つあります。「publicディレクトリ」と「resourcesディレクトリ」があるのですが、一見すると「resourcesディレクトリ」の中にsassディレクトリとjsディレクトリがあるので、この中に設置するのかなと考えたのですが、これはハズレのようでした。
ならば、と、「publicディレクトリ」にcssディレクトリとjsディレクトリを作成して、相対パスでリソースファイル群を指定したら、取りあえずは動くのですが、フルスタックのフレームワークなのになんかマニュアル操作すぎて違和感が残ります。
Node.js（Javascript）が必要な理由
そこで、インターネットを隈なく探した結果、ようやく見つけたのがLaravel6ではリソースファイルをコンパイルすることが出来るということでした。筆者自身、Sassファイルは最終的にどこかでコンパイルして、CSSファイルを吐き出すという知識を持ってましたので、Laravel6のファイルをしらみつぶしに追っていたところ、ようやく見つけたのが【webpack.mix.js】というファイル内に、有った次のようなコードです。
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');筆者の勘ですが、なかなか臭うソースコードではありませんか。”mix”というのが、知識がなく説明することができませんが、引数を確認したところ「第1引数が入力」で「第2引数が出力」だと考えました。どうやら、これがコンパイルに必要な記述なようです。
リソースファイルのコンパイル
まず、必要なスタイルシートとJavascriptのファイルを同じような記述で、追加します。コンパイルするために必要なツールをインストールするため、次のようなコマンドを実行します。
npm install上のインストールするためのコマンドは１プロジェクトで１回だけ実行すれば良いようです。
次に、肝心のリソースファイルのコンパイルは、次のようなコマンドを実行します。
npm run devさて、「publicディレクトリ」に戻りますと、jsディレクトリとcssディレクトリが新たに生成されて、その中にSassファイルはCSSファイルとして記述されています。
リソースファイルをコンパイルするためにNode.jsが必要なようです。
jsファイルとcssファイルをViewに適用
コンパイルされたリソースファイルは序盤で説明したように相対パスでも指定ができますが、どうやら違うようで、次のように指定するようです。
<link rel="stylesheet" href="{{ mix('/css/test.css') }}">mixは関数かなんかかなと思ったら、Bladeのファサードの方が正しいようです。jsファイルも同じように指定すれば動きました。
Node.jsを利用して都度コンパイルが必要
ということで、リソースファイルを読み込んで指定することができました。筆者の環境では、これで解決しています。
しかしながら、スタイルシートやJavascriptを編集するごとに、組み込みサーバーを止めてコンパイルしてまたサーバーを実行ってめんどくさいですね。実際に開発するときは、Bashのウィンドウを２つ起動して、１つはサーバー用としてずっと起動しておき、もう１つは、コンパイル用にしておくと便利かと思います。
以上になります。
