Laravel を平文 CSS や平文 Javascript で書くと Cache リセットしずらいから全部ビルドするように mix を書いてみたけど、ビルド時間がかかるようになって、あんまりよくなかったという話です。

はじめに

Sass って覚えるのダルくないですか？

僕はだるいです。

覚えるのがだるい理由は以下のとおりです

〇たいして使う人が居ないのに特有の書き方があるからダルイ

〇共通レイアウトを引っ張ってこれるという売り文句があるが、ちゃんとやっていれば CSS でも普通にできるからダルイ

〇ただでさえ重いホームで要らん CSS を呼び込むのはダルイ

自分が Sass を覚えるのはともかく、ほかの人にそれを強要するかどうかってところで、やはり生 CSS のほうが敷居も下がるし使いやすいと思う。

ということでダルイです。

僕はどうしても平文 CSS と平文 Javascript で書きたい

今回の趣旨はこれです。

（本当は React で書きたい。）

男にはどうしても生 CSS と生 Javascript で書かないといけないと気があります。

そう心に誓って、以下の記事を書いていきます。

Laravel で平文 CSS を書く方法

超簡単です。

public/css に CSS ファイルを置いてそれを読み込ませれば良いだけです。

とてつもなくシンプルです。

普通に CSS が書けます。

デプロイ時に気づく問題点

• コンパイルどうする？

• ブラウザのキャッシュ対策どうする？

コンパイルは、読み込みを早くするために、CSS ファイルの記述を、グチャーってやることです。

ブラウザのキャッシュは、CSS ファイルの情報をブラウザに保存しておくことで表示速度を高めるというシステムのことを指していますが、CSS ファイルを更新した際に更新したことが分からず、過去の（ブラウザに保存された）CSS を読み込んでしまうというものです。

それ Laravel-mix で出来るよ！

Laravel には laravel-mix という素晴らしいシステムが搭載されています。

自分もこのシステム結構好きです。

コンパイルも、ブラウザのキャッシュ対策も、laravel-mix で対応できるようになっています。

プロジェクトのディレクトリに、webpack.mix.js というファイルがあります。

そこに、という記述があります。これは mix 時にファイルにバージョンを追記してくれると言う内容になります。

if (mix.inProduction()) {
  mix.version()
}

Blade での読み込み

<link rel="stylesheet" href="{{ mix('??.css') }}">

asset()ではなく、mix()を使ってファイルを指定することで、

production でビルドすると CSS ファイルに ID が振られて、それを読み込むことで、変更を察知することができるようになります。

平文 CSS でこれをするとどうなるか

 めちゃくちゃめんどくさくなります。

webpack.mix.js を編集します

mix.styles('resources/assets/css/user/home.css', 'public/css/user/home.css');

 記述自体はこれだけで済むのですが、全てのファイルでこれを書くのは流石にだるいです。

自動で resources に書いた CSS と Javascript を public 上にコンパイルして出力する

今回のメインコンテンツです。

まず node.js のパッケージを入れます。

npm install path
npm install glob

webpack.mix.js

var glob = require("glob")
const path = require("path")

//平文CSS
glob("resources/assets/css/**/*", (err, files) => {
  const css_files = files.filter(x => x.indexOf(".css") !== -1)
  css_files.forEach(file => {
    var name = file.replace("resources/assets/", "public/")
    mix.styles(file, name)
  })
})

// 平文Javascript
glob("resources/assets/js/javascript/**/*", (err, files) => {
  const js_files = files.filter(x => x.indexOf(".js") !== -1)
  js_files.forEach(file => {
    var name = file.replace("resources/assets/js/javascript", "public/js")
    var js_path = path.dirname(name)
    mix.babel(file, name)
  })
})

はい。

resources/assets/css/に記述した CSS を public/css に出力

resources/assets/js/javascript に記述した Javascript を public/js に出力

するという処理になります。

これで、resource 上で CSS ファイルを作成したり編集したりすると public の CSS ファイルが勝手に更新されるという感じになります。

npm run watch

をお忘れないように！

課題感

コンパイルの時間がかかるようになってしまった・・・。

開発中は結構スピーディに CSS とか書き換わって欲しいなぁ。

永遠にこれだとストレスなので、一時的にはこれで良いかもしれないが、最終的には sass で書くのを検討しないといけないかもしれない。ぴえん。

Nextjs の hotreload とか快適すぎてたまらない。