LaravelにLaravel Mixを入れてscssへのcssへのコンパイル、複数のjsファイルの1ファイルへのバンドルができるようにします。
scssとは、cssからの派生言語でcssを書きやすくしたもので、こちらをコンパイルしてcssに変換することができます。
ネスト構造での記述や関数を使うことでコードを見やすくすることもできますし、コンパイル時にエラーチェックもしてくれるためミスが少なくなるなど、cssを直に書くよりも利点があるため利用を推奨します。
jsファイルの1ファイルへのバンドルですが、いちいち複数のjsを読みにいくことは表示速度に影響するのでやはりメリットがあります。
そのためLaravel Mixというwebpackベースのcssやjsといったファイルを効率的に管理するためのツールを入れてLaravelで上記を実現できるようにしたいと思います。
当然Laravelをインストールしていることが前提ですが、もしLaravelとはというところから始めるようであれば下記を参照してください。
node.jsをインストールする
node.jsがインストールされているかを確認し、なければインストールします。
node.jsとはJavascriptでサーバー、ウェブアプリケーション、ツールを開発できるようにするオープンソースのプラットフォームです。
まずnodejsパッケージを提供するnodeリポジトリがインストールされているか確認します。
ll /etc/yum.repos.d/ | grep nodellコマンドはls -lのエイリアスで、yum.repos.dディレクトリはyumのリポジトリ設定ファイルが配置されるディレクトリです。
コマンドで何も表示されなければnodeリポジトリをインストールします。
curl -sL https://rpm.nodesource.com/setup_16.x | bash -当時サポート対象で安定バージョンであったバージョン16を指定していますが、最新のバージョン情報を確認して指定してください。
nodeリポジトリがインストールされたことを確認します。
ll /etc/yum.repos.d/ | grep node問題なければインストールしたリポジトリからnodejsパッケージをインストールします。
yum install -y nodejsnodejsがインストールされたことを確認するため、nodeとそのパッケージ管理ツールであるnpmのバージョンを確認します。
node -v
npm -vいずれのコマンドでも問題なくバージョン表示されれば完了です。
Laravel mixをインストールする
node.jsをインストールできたためLaravel Mixをインストールします。
インストールするプロジェクトのルートフォルダに移動します。
cd /var/www/html/test仮にtestとしています。
npmのコマンドでLaravel Mixをインストールします。
npm install laravel-mix --save-dev–save-devは開発環境でのみ必要なパッケージをインストールするオプションです。
念のためwebpack.mix.jsを確認します。
const mix = require('laravel-mix');
/* |-------------------------------------------------------------------------- | Mix Asset Management |-------------------------------------------------------------------------- | | Mix provides a clean, fluent API for defining some Webpack build steps | for your Laravel applications. By default, we are compiling the CSS | file for the application as well as bundling up all the JS files. | */
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css上記の通りであれば問題ないです。
mix.jsではjsの処理をし、この場合app.jsをコンパイルしたものをpublic/js配下に作成します。
mix.sassはscssの処理をし、この場合app.scssをコンパイルしたapp.cssをpublic/css配下に作成します。
実際に実行してみます。
コンパイル対象となるresources/js/app.jsとresources/css/app.scssを作成しておきます。
作成できたら開発環境用のスクリプトを実行するコマンドを実行します。
npm run devdevはpackage.jsonに定義されていて、npm run developmentを実行したのと同義です。
public配下のjsとcssフォルダにファイルが作成されれば完了です。
