روش استفاده از لاراول میکس در پروژه های غیر لاراولی

فکر نکنم لاراول کارهایی که از میکس استفاده کردن و ناراضی هستن تعدادشون به انگشت های دست هم برسه. خیلی ابزار قدرتمند و حرفه ای هستش که به نظرم هر لاراول کاری باید ازش استفاده کنه و بدون شک ضرر نمیکنه.

حالا ممکنه برای خیلی ها سوال پیش بیاد که آیا این ابزار فقط مخصوص لاراول کارها و بک اند کارهاست؟؟ توی جواب باید بگم: نه! نیست. لاراول میکس یک ابزار برای فرانت کارها هستش و اصلا ربطی به بک اند نداره و توسط JeffreyWay خلق شده و توی هر پروژه ای میشه ازش استفاده کرد.

حالا لاراول میکس چیکار میکنه؟ لاراول میکس یه ابزار قدرتمند برای کامپایل فایل های جاوااسکریپت و استایل توی پروژه هستش اگر بخوام یک سری از هنرنمایی هاش رو نام ببرم باید بگم که میتونه فایل های sass رو به css یا دستورات جاوااسکریپت es6 رو به دستورات es5 تبدیل کنه برای این که توی همه مرورگر ها اجرا بشه و یا حتی فایل های معمولی رو فشرده سازی یا به اصطلاح minify کنه که حجم کمتری رو بگیرن و خیلی کارهای دیگه هستش که این ابزار قدرتمند از پسش بر میاد.

خب اول از هر چیز برای استفاده لاراول میکس باید روی سیستمتون node و npm نصب باشه برای اطمینان دستورات زیر رو وارد کنید تا ورژن node و npm نصب شده روی سیستمتون رو نمایش بده و مطمئن بشید که این دو نصب هستش.

node -v
npm -v

خروجی دستورات بالا به شکل زیر هستش.

خب وارد پوشه پروژه خودتون بشید و دستور زیر رو بزنید و اطلاعات خواسته شده رو پر کنید تا فایل package.json به پروژه شما اضافه بشه.

npm init

توی مرحله بعد دستور زیر رو وارد کنید تا لاراول میکس و sass برای شما نصب بشه.

npm install laravel-mix cross-env node-sass --save-dev

بعد از اجرای دستور با یه همچین خروجی ای مواجه میشید که البته کم ممکنه طول بکشه(بسته به سرعت اینترنت)

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

const mix = require('laravel-mix');

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

قبل از این که بریم سراغ مرحله بعد باید به توضیح کوچیکی بدم در مورد کد بالا. تابع js برای کامپایل فایل های جاوااسکریپت هستش و تابع sass هم همونطور که از اسمش پیداست فایل های sass رو کامپایل میکنه و به فایل css تبدیل میکنه توی پارامتر اول هر دو تابع باید آدرس فایلی که میخواید کامپایل بشه رو بدید و پارامتر دوم باید آدرس پوشه ای که میخواید فایل کامپایل شده توش قرار بگیره رو بدید به عنوان مثال تابع بالا فایل های app.js و app.scss رو کامپایل میکنه و فایل کامپایل شده رو توی آدرس public/js و public/css قرار میده که باید این فایل های کامپایل شده رو توی پروژتون اضافه کنید و ازش استفاده کنید. اگر میخواید با توابع لاراول میکس بیشتر آشنا بشید به این آدرس برید و داکیومنتش رو مطالعه کنید.

مرحله بعدی باید script های زیر رو به فایل package.json اضافه شده به پروژتون اضافه کنید. اگر توی فایل package.json بخش scripts موردی وجود داشت موارد زیر رو باهاش جایگزین کنید.

  &quotscripts&quot: {
          &quotdev&quot: &quotnode node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js&quot,
          &quotwatch&quot: &quotnode node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js&quot,
          &quothot&quot: &quotnode node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js&quot,
          &quotproduction&quot: &quotnode node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js&quot
  },

خب تموم شد الان میتونید ازش استفاده کنید :)

الان میتونید با استفاده از دستورات زیر از لاراول میکس استفاده کنید.

npm run dev

برای کامپایل کردن فایل ها توی حالت development

توجه داشته باشید که ممکنه برای بار اول که این دستور اجرا میشه یک سری پکیج های مورد نیازش رو دانلود کنه و بعد بسته بشه که باید یم بار دیگه اجرا کنیمش تا به صورت کامل برامون اجرا بشه(ممکنه بار اول احتیاج به 2 بار اجرای دستور باشه)

npm run watch

این دستور از نظر کامپایلی مانند دستور قبلی هستش تنها فرقش با دستور قبلی اینه که دستور قبل بعد از کامپایل فایل ها بسته میشه و برای استفاده مجدد باید دوباره اجرا کنیمش ولی این دستور بعد از کامپایل فایل ها باز مونده و منتظر تغیرات فایل ما هستش و با هر تغیر توی فایل ها به صورت خودکار تغیرات رو کامپایل میکنه و برای زمانی که داریم پروژه رو توسعه میدیم واقعا به کار میادش

npm run production

این دستور رو معمولا بعد از انجام پروژه استفاده میکنن تا تمام فایل هارو نهایی و minify کنه.