لاراول یکی از محبوب‌ترین فریم‌ورک‌های PHP است که قابلیت‌های متنوعی را برای توسعه‌ی سریع و ساده وب‌اپلیکیشن‌ها فراهم می‌کند. یکی از این قابلیت‌ها مدیریت و باندلینگ امکانات و ابزارهای فرانت‌اند است. به زبان ساده، باندلینگ به معنای جمع‌بندی و فشرده‌سازی فایل‌های متفرقه‌ی CSS و JavaScript به یک یا تعداد کمتری فایل است که منجر به بهبود سرعت لود صفحات وب می‌شود.
برای باندلینگ منابع فرانت‌اند در لاراول، معمولا از ابزارهایی مانند Laravel Mix استفاده می‌شود. Laravel Mix یک بسته‌ی قدرتمند است که بر اساس Webpack ساخته شده و به شما اجازه می‌دهد تا به راحتی فرآیند کامپایل و باندلینگ منابع خود را مدیریت کنید.
در این آموزش، ما همراه با هم خواهیم دید چگونه منابع CSS و JavaScript را با استفاده از Laravel Mix باندل کنیم. این فرآیند شامل نصب ابزار مورد نیاز، تنظیمات مربوطه و ساختاردهی پروژه می‌شود.
بار اول که Laravel Mix را در پروژه‌ی خود استفاده می‌کنید، ممکن است کمی گیج کننده باشد. اما پس از این که چند بار از آن استفاده کنید، به سرعت متوجه خواهید شد که چقدر در صرفه‌جویی زمان و انرژی موثر است.
حال بگذارید نگاهی به کدهای مورد نیاز بیندازیم و سپس جز به جز توضیح دهیم که چگونه این کدها کار می‌کنند:
// فایل webpack.mix.js
let mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.version();
توضیح کد
let mix = require('laravel-mix');این خط لاراول میکس را فراخوانی می‌کند که به شما اجازه می‌دهد تا با استفاده از آن، منابع خود را باندل کنید.
mix.js('resources/js/app.js', 'public/js')این خط فایل JavaScript اصلی شما را که در مسیر
resources/js/app.js قرار دارد می‌گیرد و آن را به مسیر public/js باندل می‌کند.mix.sass('resources/sass/app.scss', 'public/css')این خط فایل SASS شما را که در مسیر
resources/sass/app.scss قرار دارد کامپایل کرده و آن را در مسیر public/css قرار می‌دهد..version()این تابع یک هش در آخر نام فایل خروجی اضافه می‌کند تا در صورت بروز رسانی فایل‌ها، مرورگر بتواند نسخه‌ی جدیدتر را دانلود کند.