آشنایی با لاراول میکس (Laravel Mix)

همونطور که از اسمش معلومه (لاراول میکس – Laravel Mix)، قراره یه چیزی رو با هم میکس یا ترکیب کنه. ولی خب اون چیه! براتون توضیح میدم:

لاراول میکس چیست؟

لاراول میکس در اصل یه پکیج هستش که میشه خارج از پروژه های لاراولی هم ازش استفاده کرد. ولی وقتی لاراول رو نصب میکنین، داخل خودش این پکیج رو داره. این پکیج مستقیما مربوط به فرانت‌اند (frontend) پروژه میشه و کار اصلی اون کامپایل کردن فایل های assets پروژه هستش. این ابزار شبیه gulp, Grunt و پکیج های مشابه عمل میکنه. لاراول میکس فایل های CSS, SCSS, LESS, JS و تمامی فایل های مربوط به assets ها رو با هم کامپایل (ترکیب و فشرده) میکنه و داخل فولدر public پروژه ذخیره میکنه. نمونه ساده استفاده از اون به شکل زیر هستش:

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css');

نصب لاراول میکس

لاراول میکس برای راه انداری نیاز داره که از NPM استفاده کنه. پس قبل از استفاده از اون باید Node.js و NPM روی سیستمتون نصب شده باشه. وقتی که لاراول رو نصب میکنین یه فایلی به اسم package.json داخل فولدر اصلی پروژه وجود داره. داخل این فایل هر چیزی که لاراول میکس نیاز داره وجود داره. در اصل این فایل مثل فایل composer.json که از طریق PHP پکیج های لازم رو برامون نصب میکنه عمل میکنه. تنها فرق package.json با composer.json اینه که مربوط به فرانت‌اند میشه و پکیج های ظاهری و ابزار های مربوط رو با استفاده از NPM به پروژه اضافه میکنه. با دستور زیر داخل ترمینال فولدر پروژه NPM رو نصب میکنیم تا فایل های مورد نیازش رو به پروژه اضافه کنه :

npm install

بعد از تموم شدن نصب، باید NPM رو اجرا کنیم تا کامپایل ها انجام بشه. این ترکیب کردن و پیکیربندی فایل ها توسط وب پک (webpack) انجام میشه. برای اجرا کردن میتونیم از حالت dev که فقط کار میکس رو انجام میده و برای حالت دولوپ (Develop) هستش استفاده کنیم. حالت دیگه ای به اسم production وجود داره که علاوه بر ترکیب کردن فایل ها، کار فشرده سازی هم انجام میده و برای موقعی هستش که کار پروژه تموم شده و میخوایین اون رو روی سرور بالا بیارین :

// Run all Mix tasks...
npm run dev

// Run all Mix tasks and minify output...
npm run prod

برای اینکه بتونین بصورت زنده ببینین که چه کارهایی داره انجام میشه و یا چه ارور هایی توی کدوم یکی از فایل ها اتفاق میفته، میتونین از حالت watch استفاده کنین. این حالت هم برای وقتی هستش که در حال توسعه دادن یا دولوپ پروژه هستین:

npm run watch

در بعضی مواقع امکان داره که وب پک نتونه تغییراتی که روی فایل های شما اتفاق میفته رو تشخیص بده، پس میتونین از حالت watch-poll استفاده کنین:

npm run watch-poll

کار با استایل ها

برای کار با لاراول میکس شما کافیه فایل webpack.mix.js که در فولدر اصلی پروژه قرار داره رو باز کنین. من در ادامه با مثال براتون توضیح میدم که این پکیج چطوری کار میکنه.

کار با SASS

با استفاده از این روش فایل sass شما که در مسیر resources/sass/custom-style.sass وجود داره به فایل css که در مسیر public/css ذخیره میشه، کامپایل میشه :

mix.sass('resources/sass/custom-style.sass', 'public/css');

شما میتونین چندتا فایل رو همزمان برای کامپایل کردن معرفی کنین :

mix.sass('resources/sass/custom-style.sass', 'public/css')
    .sass('resources/sass/custom-admin.sass', 'public/css/admin');

کار با LESS

فایل less هم میتونین مثل روش قبل کامپایل کنین:

mix.less('resources/sass/custom-style.less', 'public/css');

یا اگه چندتا فایل less دارین میتونین مثل زیر عمل کنین:

mix.less('resources/sass/custom-style.less', 'public/css')
    .less('resources/sass/custom-admin.less', 'public/css/admin');

ترکیب فایل های css

شما میتونین همه ی فایل ها css خودتون رو با هم ترکیب کنین تا برای هر فایل رکوئست جدا سمت سرور نره. اینطوری تعداد درخواست هایی که سمت سرور میره کمتر میشه:

mix.styles([
    'public/css/custom-style.css',
    'public/css/admin/custom-admin.css'
], 'public/css/all.css');

کار با جاوا اسکریپت

این کار فایل جاوا اسکریپت شما رو با آخرین متدی که جاوا اسکریپت ارائه کرده (مثل ES7 ,…) کامپایل میکنه:

mix.js('resoureces/custom-app.js', 'public/js');

همچنین برای جاوا اسکریپت هم مثل استایل ها میشه که چندتا فایل رو با هم ترکیب کرد:

mix.scripts([
    'public/js/custom-app.js',
    'public/js/admin/custom-admin.js'
], 'public/js/all.js');

کارهای زیاد دیگه ای هم میشه با این پکیج مفید انجام داد که من توی این مقاله چندتا از پرکاربرد هاشو براتون توضیج دادم ولی اگه دوست دارین میتونین داکیومنت لاراول میکس رو مطالعه کنین و از امکانات دیگه‌ هم استفاده کنین.

خوشحال میشم نظراتتون رو درباره مقاله بدونم.