keyboard_return  چسبون مقالات آموزشی تغییر نام Elixir به Mix در لاراول ۵.۴
  1. تغییر نام Elixir به Mix در لاراول ۵.۴

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

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

Laravel-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');

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

تغییر نام Elixir به Mix در لاراول ۵.۴ - 4.2 از 5 بر اساس 150 رای

امتیاز کاربران

تغییر نام Elixir به Mix در لاراول ۵.۴
دیدگاه‌ها
علی علی 5 سال پیش
ببخشید گفتید که: "قبل از کار با Mix باید مطمئن شوید که Node.js و NPM روی سیستم شما نصب باشد." اینجا nodejs چه کاری را برای ما انجام میده؟ یکم توضیح میدی؟ بدون نصب بودن nodejs نمیتونیم از امکاناتی مثل elixir یا mix در لاراول استفاده کنیم؟ ممنون
آرمان بابائی آرمان بابائی 5 سال پیش
npm روی پلتفرم nodejs اجرا میشه. مثل برنامه های اندروید که روی سیستم عامل اندروید اجرا میشن. پس ضروریه که نصب باشه nodejs
علی علی 5 سال پیش
اگر بخوایم از node.js برای استفاده از sass کمک بگیریم. کدهایی که تولید میشن بازم روی هاست اشتراکی معمولی قابل استفاده هستند؟ یعنی node.js فقط کد های sass رو کامپایل میکنه برامون؟
آرمان بابائی آرمان بابائی 5 سال پیش
بله دقیقا. نیاز نیست روی سرور nodejs رو نصب کنید.

2023 © Copyright کليه حقوق مادی و معنوی براي چسبون محفوظ است و هرگونه کپی برداری پیگرد قانونی دارد.