معرفی مقدماتی Laravel Mix

سلام خدمت شما دوستان و همراهان سایت چسبون. دراین پست قصد داریم در مورد Mix در لاراول صحبت کنیم. با ما همراه باشید:

یکی از قابلیت های زیبای فریم ورک لاراول سرویس Elixir می باشد. این سرویس با ارائه API های ساده و کارامد به شما این امکان را می دهد که بتوانید Gulp task های پایه و آسان را برای لاراول اپلیکیشن خود بنویسید. (درباره Elixir بیشتر بدانید)

باید گفت که Mix نیز همان Elixir در لاراول می باشد اما با کلی تفاوت !

الکسیر در لاراول ۵٫۴ جای خود را به پروژه جدیدی به نام Mix داده است. هر دو ابزار به دنبال یک هدف هستند اما با روشی متفاوت.

اگر به فایل های پیش فرض Elixir و Mix نگاهی بیاندازید متوجه می شوید که شباهت زیادی به هم دارند:

// Elixir's gulpfile.js
const elixir = require('laravel-elixir');
 
require('laravel-elixir-vue-2');

elixir((mix) => {
    mix.sass('app.js')
        .webpack('app.js');
});

// Mix's webpack.mix.js
const { mix } = require('laravel-mix');

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

نصب و راه اندازی:

قبل از کار با Mix باید مطمئن شوید که Node.js و NPM روی سیستم شما نصب باشد. برای حصول اطمینان از نصب بودن Node.js و NPM و یا اطلاع از ورژن آن از دستورات زیر در ترمینال/CMD استفاده می کنیم:

node -v 
npm -v

به طور پیش فرض Homestead لاراول همه ابزار های مورد نیاز برای توسعه اپلیکیشن لاراول را روی سیستم شما نصب خواهد کرد. به هر حال اگر شما از Vagrant استفاده نمی کنید می توانید آخرین نسخه فایل نصب Node.JS و NPM را از اینجا دانلود کنید.

Laravel Mix

تنها قدم باقی مانده نصب Mix می باشد. بعد از نصب و راه اندازی لاراول در مسیر ریشه (root) پروژه یک فایل با نام package.json  مشاهده می کنید. این فایل شبیه فایل composer.json هست با این تفاوت که بجای php وابستگی های مربوط به Node را تعریف میکند. با اجرای دستور زیر در خط فرمان تمام وابستگی های مورد نیاز را نصب کنید

npm install

توجه کنید اگه برای توسعه لاراول از سیستم عامل ویندوز استفاده می کنید باید از پارامتر no-bin-links-- همراه دستور npm استفاده کنید:

--no-bin-links

اجرای Mix

به منظور اجرای دستورات Elixir از فرمان gulp و یا gulp watch استفاده می شد. این دستورات در Mix با npm run dev و npm run watch جایگزین شده اند. جهت اجرای دستورات Mix کافیست تا یکی از اسکریپت های NPM که در فایل package.json قرار دارد را اجرا کنید:

//اجرای تمام دستورات 
Mix npm run dev 
//اجرای تمام دستورات Mix و minify کردن فایل خروجی 
npm run production

کار با استایل شیت Stylesheet

متد Less

 از این متد بای کامپایل کردن فایل های Less به CSS استفاده می شود. برای مثال جهت کامپایل کردن فایل app.less و ذخیره آن در مسیر public/css/app.css به صورت زیر عمل می کنیم:

mix.less('resources/assets/less/app.less', 'public/css');

پارامتر اول مسیر کامل فایل مبدا و پارامتر دوم نیز مسیر کامل مقصد می باشد.

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

mix.less('resources/assets/less/app.less', 'public/css') 
   .less('resources/assets/less/admin.less', 'public/css'); 

در صورتیکه می خواهید نام فایل مقصد را نیز تغییر دهید و نام دلخواه خود را برای آن انتخاب نمایید مسیر کامل فایل مقصد به همراه نام فایل را در پارامتر دوم وارد نمایید.

mix.less('resources/assets/less/app.less', 'public/stylesheets/styles.css');

متد Sass

متد Sass امکان کامپایل کردن فایل های Sass را برای ما فراهم خواهد کرد:

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

همچنین با استفاده از Mix می توانید چندین فایل را با هم ادغام کنید:

mix.combine([ 'public/css/vendor/jquery-ui-one-thing.css',
              'public/css/vendor/jquery-ui-another-thing.css' ],
              'public/css/vendor.css');

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

mix.copy('node_modules/jquery-ui/some-theme-thing.css',
         'public/css/some-jquery-ui-theme-thing.css');

mix.copy('node_modules/jquery-ui/css', 'public/css/jquery-ui');

بر خلاف Elixir که با اجرای gulp به طور خودکار برایتان source map را آماده می کرد در Mix برای ایجاد source map باید دستور زیر را اجرا کنید:

mix.sourceMaps();

کار با فایل های جاوا اسکریپت

Mix ویژگی های زیادی را برای کار با فایل های جاوا اسکریپت در اختیار شما قرار میدهد. با استفاده از متد js می توانید فایل های js مورد نظرتان را نیز کامپایل کنید.

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

جهت مطالعه بیشتر می توانید از مستندات لاراول استفاده کنید. چسبون مرجع برنامه نویسی و طراحی وب.