نسخه:

کامپایل دارایی (ترکیب)

معرفی

Laravel Mix یک API روان برای تعریف مراحل ساخت Webpack برای برنامه Laravel شما با استفاده از چندین پیش پردازشگر CSS و جاوا اسکریپت رایج ارائه می دهد. از طریق روش زنجیره ای ساده، می توانید خط لوله دارایی خود را روان تعریف کنید. مثلا: 

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

اگر تا به حال در مورد شروع کار با Webpack و کامپایل دارایی سردرگم و غرق شده اید، لاراول میکس را دوست خواهید داشت. با این حال، لازم نیست هنگام توسعه برنامه خود از آن استفاده کنید. شما آزاد هستید که از هر ابزار خط لوله دارایی که می خواهید یا حتی از هیچ کدام استفاده کنید.

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

در حال نصب Node

قبل از راه اندازی Mix، ابتدا باید مطمئن شوید که Node.js و NPM روی دستگاه شما نصب شده اند. 

node -v
npm -v

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

لاراول میکس

تنها مرحله باقی مانده نصب لاراول میکس است. در یک نصب جدید لاراول، package.json فایلی را در ریشه ساختار دایرکتوری خود خواهید یافت. فایل پیش فرض package.json شامل همه چیزهایی است که برای شروع نیاز دارید. به این مانند composer.json فایل خود فکر کنید، با این تفاوت که به جای PHP، وابستگی Node را تعریف می کند. می توانید وابستگی هایی را که به آن ارجاع می دهد با اجرای زیر نصب کنید: 

npm install

در حال اجرا مخلوط

Mix یک لایه پیکربندی در بالای Webpack است ، بنابراین برای اجرای وظایف Mix خود فقط باید یکی از اسکریپت های NPM را که با package.json فایل پیش فرض لاراول موجود است اجرا کنید: 

// Run all Mix tasks...
npm run dev
 
// Run all Mix tasks and minify output...
npm run production

تماشای دارایی ها برای تغییرات

این npm run watch دستور در ترمینال شما اجرا می شود و تمام فایل های مربوطه را برای تغییرات مشاهده می کند. وب‌پک پس از تشخیص تغییر، به‌طور خودکار دارایی‌های شما را مجدداً کامپایل می‌کند: 

npm run watch

ممکن است متوجه شوید که در محیط‌های خاصی وقتی فایل‌های شما تغییر می‌کند Webpack به‌روزرسانی نمی‌شود. اگر در سیستم شما چنین است، از watch-poll دستور زیر استفاده کنید: 

npm run watch-poll

کار با Stylesheets

فایل webpack.mix.js نقطه ورود شما برای جمع آوری تمام دارایی ها است. آن را به عنوان یک بسته بندی پیکربندی سبک در اطراف Webpack در نظر بگیرید. وظایف ترکیبی را می‌توان به هم متصل کرد تا دقیقا مشخص شود که دارایی‌های شما چگونه باید کامپایل شوند.

کمتر

این less روش ممکن است برای کامپایل Less در CSS استفاده شود. بیایید app.less فایل اصلی خود را در کامپایل کنیم public/css/app.css . 

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

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

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

اگر می خواهید نام فایل CSS کامپایل شده را سفارشی کنید، می توانید یک مسیر فایل کامل را به عنوان آرگومان دوم به متد ارسال کنید less : 

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

اگر نیاز دارید که گزینه های زیرین افزونه Less را لغو کنید ، می توانید یک شی را به عنوان آرگومان سوم به mix.less() : 

mix.less('resources/less/app.less', 'public/css', {
    strictMath: true
});

ساس

این sass روش به شما اجازه می دهد تا Sass را در CSS کامپایل کنید. می توانید از این روش استفاده کنید: 

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

دوباره، مانند less روش، می‌توانید چندین فایل Sass را در فایل‌های CSS مربوطه خود کامپایل کنید و حتی دایرکتوری خروجی CSS حاصل را سفارشی کنید: 

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

گزینه‌های افزونه Node-Sass اضافی ممکن است به عنوان آرگومان سوم ارائه شوند: 

mix.sass('resources/sass/app.sass', 'public/css', {
    precision: 5
});

قلم

مشابه Less و Sass، این stylus روش به شما اجازه می دهد تا Stylus را در CSS کامپایل کنید: 

mix.stylus('resources/stylus/app.styl', 'public/css');

همچنین می‌توانید افزونه‌های Stylus دیگری مانند Rupture را نصب کنید . ابتدا افزونه مورد نظر را از طریق NPM ( npm install rupture ) نصب کنید و سپس آن را در تماس خود به mix.stylus() : 

mix.stylus('resources/stylus/app.styl', 'public/css', {
    use: [
        require('rupture')()
    ]
});

PostCSS

PostCSS ، یک ابزار قدرتمند برای تبدیل CSS شما، همراه با Laravel Mix خارج از جعبه گنجانده شده است. به‌طور پیش‌فرض، Mix از افزونه محبوب Autoprefixer استفاده می‌کند تا به‌طور خودکار تمام پیشوندهای سازنده CSS3 لازم را اعمال کند. با این حال، شما آزاد هستید که هر افزونه دیگری را که برای برنامه شما مناسب است اضافه کنید. ابتدا افزونه مورد نظر را از طریق NPM نصب کنید و سپس در webpack.mix.js فایل خود به آن مراجعه کنید: 

mix.sass('resources/sass/app.scss', 'public/css')
    .options({
        postCss: [
            require('postcss-css-variables')()
        ]
    });

CSS ساده

اگر می‌خواهید چند شیت ساده CSS را در یک فایل به هم متصل کنید، می‌توانید از این styles روش استفاده کنید. 

mix.styles([
    'public/css/vendor/normalize.css',
    'public/css/vendor/videojs.css'
], 'public/css/all.css');

پردازش URL

از آنجایی که Laravel Mix بر روی Webpack ساخته شده است، درک چند مفهوم Webpack مهم است. برای کامپایل CSS، Webpack هر url() تماسی را در شیوه نامه شما بازنویسی و بهینه می کند . در حالی که این ممکن است در ابتدا عجیب به نظر برسد، اما یک عملکرد فوق العاده قدرتمند است. تصور کنید که می‌خواهیم Sass را کامپایل کنیم که شامل یک URL نسبی به یک تصویر است: 

.example {
    background: url('../images/example.png');
}

مسیرهای مطلق برای هر داده شده url() از بازنویسی URL مستثنی خواهند شد. به عنوان مثال، url('/images/thing.png') یا url('http://example.com/images/thing.png') تغییر نخواهد کرد.

به‌طور پیش‌فرض، Laravel Mix و Webpack آن را پیدا می‌کنند example.png ، آن را در public/images پوشه‌تان کپی می‌کنند و سپس url() در استایل شیت ایجاد شده‌تان بازنویسی می‌کنند. به این ترتیب، CSS کامپایل شده شما به صورت زیر خواهد بود: 

.example {
    background: url(/images/example.png?d41d8cd98f00b204e9800998ecf8427e);
}

همانطور که این ویژگی ممکن است مفید باشد، ممکن است ساختار پوشه موجود شما قبلاً به روشی که دوست دارید پیکربندی شده باشد. اگر چنین است، می توانید url() بازنویسی را غیرفعال کنید: 

mix.sass('resources/app/app.scss', 'public/css')
    .options({
        processCssUrls: false
    });

با افزودن این فایل به webpack.mix.js فایل شما، Mix دیگر با هیچ یک از دارایی ها مطابقت نمی کند url() یا در فهرست عمومی شما کپی نمی کند. به عبارت دیگر، CSS کامپایل شده دقیقاً شبیه نحوه تایپ اولیه شما خواهد بود: 

.example {
    background: url("../images/thing.png");
}

نقشه های منبع

اگرچه به طور پیش فرض غیرفعال است، نقشه های منبع ممکن است با فراخوانی mix.sourceMaps() روش موجود در webpack.mix.js فایل شما فعال شوند. اگرچه با هزینه کامپایل/عملکرد همراه است، اما هنگام استفاده از دارایی های کامپایل شده، اطلاعات رفع اشکال اضافی را در اختیار ابزارهای توسعه دهنده مرورگر شما قرار می دهد. 

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

سبک نقشه برداری منبع

Webpack انواع مختلفی از سبک های نقشه برداری منبع را ارائه می دهد . به طور پیش فرض، سبک نگاشت منبع Mix روی تنظیم شده است eval-source-map که زمان بازسازی سریع را فراهم می کند. اگر می خواهید سبک نقشه برداری را تغییر دهید، می توانید این کار را با استفاده از sourceMaps روش زیر انجام دهید: 

let productionSourceMaps = false;
 
mix.js('resources/js/app.js', 'public/js')
    .sourceMaps(productionSourceMaps, 'source-map');

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

Mix چندین ویژگی را برای کمک به شما در کار با فایل‌های جاوا اسکریپت ارائه می‌کند، مانند کامپایل ECMAScript 2015، بسته‌بندی ماژول، کوچک‌سازی و الحاق فایل‌های جاوا اسکریپت ساده. حتی بهتر از آن، این همه یکپارچه کار می کند، بدون نیاز به پیکربندی سفارشی: 

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

با این خط کد، اکنون می توانید از مزایای زیر استفاده کنید:

  • نحو ES2015.
  • ماژول ها
  • جمع آوری .vue فایل ها.
  • کوچک سازی برای محیط های تولید

استخراج فروشنده

یکی از نکات منفی بالقوه برای بسته‌بندی همه جاوا اسکریپت خاص برنامه با کتابخانه‌های فروشنده این است که کش طولانی‌مدت را دشوارتر می‌کند. به عنوان مثال، یک به‌روزرسانی واحد در کد برنامه شما، مرورگر را مجبور می‌کند که همه کتابخانه‌های فروشنده شما را دوباره دانلود کند، حتی اگر تغییری نکرده باشند.

اگر قصد دارید به‌روزرسانی‌های مکرر جاوا اسکریپت برنامه خود را انجام دهید، باید تمام کتابخانه‌های فروشنده خود را در فایل خودشان استخراج کنید. به این ترتیب، تغییر در کد برنامه شما تأثیری بر ذخیره vendor.js فایل حجیم شما نخواهد داشت. روش Mix extract باعث می شود این نسیم نسیمی باشد: 

mix.js('resources/js/app.js', 'public/js')
    .extract(['vue'])

این extract روش آرایه ای از تمام کتابخانه ها یا ماژول هایی را که می خواهید در یک vendor.js فایل استخراج کنید، می پذیرد. با استفاده از قطعه بالا به عنوان مثال، Mix فایل های زیر را تولید می کند:

  • public/js/manifest.js : زمان اجرا مانیفست Webpack
  • public/js/vendor.js : کتابخانه های فروشنده شما
  • public/js/app.js : کد درخواست شما

برای جلوگیری از خطاهای جاوا اسکریپت، حتما این فایل ها را به ترتیب مناسب بارگیری کنید: 

<script src="/js/manifest.js"></script>
<script src="/js/vendor.js"></script>
<script src="/js/app.js"></script>

واکنش نشان دهید

Mix می‌تواند به‌طور خودکار افزونه‌های Babel را که برای پشتیبانی از React لازم است نصب کند. برای شروع، mix.js() تماس خود را جایگزین کنید mix.react() : 

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

در پشت صحنه، Mix babel-preset-react افزونه مناسب Babel را دانلود کرده و شامل می شود.

وانیل جی اس

مشابه ترکیب شیت‌ها با mix.styles() ، می‌توانید هر تعداد فایل جاوا اسکریپت را با scripts() روش ترکیب و کوچک کنید: 

mix.scripts([
    'public/js/admin.js',
    'public/js/dashboard.js'
], 'public/js/all.js');

این گزینه به ویژه برای پروژه های قدیمی که در آنها نیازی به کامپایل Webpack برای جاوا اسکریپت خود ندارید مفید است.

یک تغییر جزئی از mix.scripts() است mix.babel() . امضای روش آن با scripts ; با این حال، فایل الحاقی کامپایل Babel را دریافت می کند که هر کد ES2015 را به جاوا اسکریپت وانیلی ترجمه می کند که همه مرورگرها آن را درک می کنند.

پیکربندی بسته وب سفارشی

در پشت صحنه، Laravel Mix به یک webpack.config.js فایل از پیش پیکربندی شده اشاره می کند تا شما را در سریع ترین زمان ممکن راه اندازی کند. گاهی اوقات، ممکن است لازم باشد این فایل را به صورت دستی تغییر دهید. ممکن است لودر یا افزونه خاصی داشته باشید که باید به آن ارجاع داده شود، یا شاید ترجیح می دهید از Stylus به جای Sass استفاده کنید. در چنین مواردی، شما دو انتخاب دارید:

ادغام پیکربندی سفارشی

Mix روش مفیدی را ارائه می دهد webpackConfig که به شما امکان می دهد هر گونه تنظیمات کوتاه Webpack را با هم ادغام کنید. این یک انتخاب بسیار جذاب است، زیرا نیازی به کپی کردن و نگهداری کپی خود از فایل ندارد webpack.config.js . این webpackConfig روش یک شی را می پذیرد که باید شامل هر پیکربندی خاص Webpack باشد که می خواهید اعمال کنید. 

mix.webpackConfig({
    resolve: {
        modules: [
            path.resolve(__dirname, 'vendor/laravel/spark/resources/assets/js')
        ]
    }
});

فایل های پیکربندی سفارشی

اگر می خواهید پیکربندی Webpack خود را به طور کامل سفارشی کنید، node_modules/laravel-mix/setup/webpack.config.js فایل را در فهرست اصلی پروژه خود کپی کنید. سپس، تمام --config ارجاعات موجود در فایل خود package.json را به فایل پیکربندی کپی شده جدید اشاره کنید. اگر این رویکرد را برای سفارشی‌سازی انتخاب می‌کنید، هر به‌روزرسانی جدید در Mix's webpack.config.js باید به صورت دستی در فایل سفارشی‌شده شما ادغام شود.

کپی کردن فایل ها و دایرکتوری ها

این copy روش ممکن است برای کپی فایل ها و دایرکتوری ها در مکان های جدید استفاده شود. این می تواند زمانی مفید باشد که یک دارایی خاص در node_modules فهرست شما باید به public پوشه شما منتقل شود. 

mix.copy('node_modules/foo/bar.css', 'public/css/bar.css');

هنگام کپی کردن یک دایرکتوری، این copy روش ساختار دایرکتوری را صاف می کند. برای حفظ ساختار اصلی دایرکتوری، باید copyDirectory به جای آن از روش استفاده کنید: 

mix.copyDirectory('resources/img', 'public/img');

نسخه‌سازی / حافظه پنهان

بسیاری از توسعه دهندگان دارایی های کامپایل شده خود را با یک مهر زمانی یا رمز منحصر به فرد پسوند می کنند تا مرورگرها را مجبور کنند به جای ارائه نسخه های قدیمی کد، دارایی های تازه را بارگیری کنند. میکس با استفاده از این روش می تواند این کار را برای شما انجام دهد version .

این version روش به طور خودکار یک هش منحصر به فرد را به نام فایل‌های همه فایل‌های کامپایل شده اضافه می‌کند و امکان تخریب حافظه پنهان را فراهم می‌کند: 

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

پس از تولید فایل نسخه شده، نام دقیق فایل را نمی دانید. بنابراین، شما باید از تابع سراسری لاراول در نماهای mix خود برای بارگذاری دارایی هش شده مناسب استفاده کنید. این تابع به طور خودکار نام فعلی فایل هش شده را تعیین می کند: mix 

<script src="{{ mix('/js/app.js') }}"></script>

از آنجایی که فایل‌های نسخه‌سازی شده معمولاً در توسعه غیر ضروری هستند، می‌توانید به فرآیند نسخه‌سازی دستور دهید فقط در طول npm run production : 

mix.js('resources/js/app.js', 'public/js');
 
if (mix.inProduction()) {
    mix.version();
}

URL های پایه ترکیبی سفارشی

اگر دارایی های کامپایل شده Mix شما در یک CDN جدا از برنامه شما مستقر شوند، باید URL پایه تولید شده توسط تابع را تغییر دهید mix . می توانید این کار را با افزودن یک mix_url گزینه پیکربندی به config/app.php فایل پیکربندی خود انجام دهید: 

'mix_url' => env('MIX_ASSET_URL', null)

پس از پیکربندی Mix URL، این mix تابع هنگام ایجاد URL به دارایی ها، URL پیکربندی شده را پیشوند می کند: 

https://cdn.example.com/js/app.js?id=1964becbdd96414518cd

مرورگر همگام سازی بارگذاری مجدد

BrowserSync می‌تواند به‌طور خودکار فایل‌های شما را برای تغییرات نظارت کند و تغییرات شما را بدون نیاز به بازخوانی دستی به مرورگر تزریق کند. می توانید پشتیبانی را با فراخوانی mix.browserSync() روش فعال کنید: 

mix.browserSync('my-domain.test');
 
// Or...
 
// https://browsersync.io/docs/options
mix.browserSync({
    proxy: 'my-domain.test'
});

شما می توانید یک رشته (پراکسی) یا یک شی (تنظیمات BrowserSync) را به این روش ارسال کنید. در مرحله بعد، سرور توسعه دهنده Webpack را با استفاده از npm run watch دستور راه اندازی کنید. اکنون، وقتی یک اسکریپت یا فایل PHP را تغییر می‌دهید، مشاهده کنید که مرورگر فوراً صفحه را به‌روزرسانی می‌کند تا تغییرات شما را منعکس کند.

متغیرهای محیطی

.env شما می توانید با قرار دادن یک کلید در فایل خود با پیشوند، متغیرهای محیطی را به Mix تزریق کنید MIX_ : 

MIX_SENTRY_DSN_PUBLIC=http://example.com

بعد از اینکه متغیر در .env فایل شما تعریف شد، می توانید از طریق process.env شی به آن دسترسی داشته باشید. اگر در حین اجرای یک watch کار، مقدار تغییر کرد، باید کار را مجدداً راه اندازی کنید: 

process.env.MIX_SENTRY_DSN_PUBLIC

اطلاعیه

وقتی در دسترس باشد، Mix به طور خودکار اعلان‌های سیستم عامل را برای هر بسته نمایش می‌دهد. این به شما بازخورد فوری می دهد که آیا تلفیقی موفق بوده است یا خیر. با این حال، ممکن است مواردی وجود داشته باشد که ترجیح دهید این اعلان‌ها را غیرفعال کنید. یکی از این نمونه ها ممکن است راه اندازی Mix در سرور تولید شما باشد. اعلان ها ممکن است از طریق روش غیرفعال شوند disableNotifications . 

mix.disableNotifications();