ホーム
Sponserd by↑転職したい人向け、ベンチャー企業の採用動画があります

【Laravel】平文CSSとJavascriptを使うときのLaravel-mixについて考えてみた【まだSassで疲弊してるの?】

こんにちは。まっつんです。

普段は、Laravel と Vue を触っています。

さて、突然なのですが、

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

僕はだるいです。

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

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

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

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

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

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

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

今回の趣旨はこれです。

(本当は React で書きたい。)

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

例えば家族に危機が迫っているときとか、生 CSS 書かないとダメですよね。

Laravel で平文 CSS を書く方法

超簡単です。

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

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

普通に CSS が書けます。

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

コンパイルどうする?

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

マジでこれっす。

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

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

それ Laravel-mix で出来るよ!

そうです。

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

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

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

webpack.mix.js // //  本番環境ではバージョン付けによるキャッシュ対策を施す(今回の内容とは関係ありません)

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

Blade での読み込み

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

こうすると、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 とか快適すぎてたまらない。