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

معرفی
نصب و راه اندازی
در حال اجرا مخلوط
کار با Stylesheets
کار با جاوا اسکریپت
نسخه‌سازی / حافظه پنهان
مرورگر همگام سازی بارگیری مجدد
متغیرهای محیطی
اطلاعیه

معرفی

Laravel Mix ، بسته‌ای که توسط خالق Laracasts، Jeffrey Way ایجاد شده است، یک API روان برای تعریف مراحل ساخت بسته وب برای برنامه Laravel شما با استفاده از چندین پیش پردازنده رایج CSS و جاوا اسکریپت ارائه می‌کند.

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

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

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

اگر برای ساخت برنامه خود با Laravel و Tailwind CSS نیاز دارید، یکی از کیت های شروع برنامه ما را بررسی کنید .

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

در حال نصب Node

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

node -v
npm -v

می توانید به راحتی آخرین نسخه Node و NPM را با استفاده از نصب کننده های گرافیکی ساده از وب سایت رسمی Node نصب کنید . یا اگر از Laravel Sail استفاده می کنید ، می توانید Node و NPM را از طریق Sail فراخوانی کنید:

./sail node -v
./sail npm -v

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

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

npm install

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

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

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

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

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

npm run watch

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

npm run watch-poll

کار با Stylesheets

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

Tailwind CSS

Tailwind CSS یک چارچوب مدرن و کاربردی برای ساخت سایت های شگفت انگیز بدون ترک HTML است. بیایید به نحوه شروع استفاده از آن در پروژه لاراول با لاراول میکس بپردازیم. ابتدا باید Tailwind را با استفاده از NPM نصب کنیم و فایل پیکربندی Tailwind خود را تولید کنیم:

npm install
 
npm install -D tailwindcss
 
npx tailwindcss init

دستور init یک tailwind.config.js فایل ایجاد می کند. بخش content این فایل به شما امکان می‌دهد مسیرهای تمام قالب‌های HTML، اجزای جاوا اسکریپت و هر فایل منبع دیگری که حاوی نام کلاس‌های Tailwind است را پیکربندی کنید تا کلاس‌های CSS که در این فایل‌ها استفاده نمی‌شوند از CSS تولیدی شما پاک شوند. ساختن:

content: [
    './storage/framework/views/*.php',
    './resources/**/*.blade.php',
    './resources/**/*.js',
    './resources/**/*.vue',
],

در مرحله بعد، شما باید هر یک از "لایه های" Tailwind را به resources/css/app.css فایل برنامه خود اضافه کنید:

@tailwind base;
@tailwind components;
@tailwind utilities;

هنگامی که لایه های Tailwind را پیکربندی کردید، آماده به روز رسانی webpack.mix.js فایل برنامه خود برای کامپایل CSS مبتنی بر Tailwind خود هستید:

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        require('tailwindcss'),
    ]);

در نهایت، باید به شیوه نامه خود در قالب طرح اولیه برنامه خود ارجاع دهید. بسیاری از برنامه ها انتخاب می کنند که این الگو را در resources/views/layouts/app.blade.php . علاوه بر این، اطمینان حاصل کنید که meta اگر تگ viewport پاسخگو وجود ندارد، اضافه کنید:

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="/css/app.css" rel="stylesheet">
</head>

PostCSS

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

ابتدا افزونه مورد نظر را از طریق NPM نصب کنید و هنگام فراخوانی متد Mix، آن را در مجموعه افزونه های خود قرار دهید postCss . این postCss متد مسیر فایل CSS شما را به عنوان اولین آرگومان و دایرکتوری که فایل کامپایل شده باید در آن به عنوان آرگومان دوم قرار گیرد را می پذیرد:

mix.postCss('resources/css/app.css', 'public/css', [
    require('postcss-custom-properties')
]);

postCss یا، برای دستیابی به کامپایل و کوچک سازی ساده CSS، می توانید بدون افزونه اضافی اجرا کنید :

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

ساس

این روش به شما امکان می دهد Sass را sass در CSS کامپایل کنید که توسط مرورگرهای وب قابل درک باشد. این متد مسیر فایل Sass شما را به عنوان اولین آرگومان خود و دایرکتوری که فایل کامپایل شده باید در آن به عنوان آرگومان دوم قرار گیرد می پذیرد: sass

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

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

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

پردازش URL

از آنجایی که Laravel Mix بر روی بسته وب ساخته شده است، درک چند مفهوم بسته وب بسیار مهم است. url() برای کامپایل CSS، وب‌پک هر تماسی را در شیوه نامه شما بازنویسی و بهینه می‌کند . در حالی که این ممکن است در ابتدا عجیب به نظر برسد، اما یک عملکرد فوق العاده قدرتمند است. تصور کنید که می‌خواهیم 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/sass/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 مدرن، بسته‌بندی ماژول، کوچک‌سازی و الحاق فایل‌های جاوا اسکریپت ساده. حتی بهتر از آن، این همه یکپارچه کار می کند، بدون نیاز به پیکربندی سفارشی:

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

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

آخرین نحو EcmaScript.
ماژول ها
کوچک سازی برای محیط های تولید

Vue

هنگام استفاده از روش، Mix به‌طور خودکار افزونه‌های Babel را که برای پشتیبانی از کامپایل کامپوننت تک فایل Vue لازم است، نصب می‌کند vue . نیازی به پیکربندی بیشتر نیست:

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

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

<head>
    <!-- ... -->
 
    <script src="/js/app.js"></script>
</head>

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

Mix می تواند به طور خودکار افزونه های Babel را که برای پشتیبانی از React لازم است نصب کند. برای شروع، یک تماس به react روش اضافه کنید:

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

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

<head>
    <!-- ... -->
 
    <script src="/js/app.js"></script>
</head>

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

یکی از نکات منفی بالقوه برای بسته‌بندی همه جاوا اسکریپت خاص برنامه شما با کتابخانه‌های فروشنده‌تان مانند React و 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>

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

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

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

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

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

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

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

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

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

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

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

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('laravel.test');

گزینه های BrowserSync ممکن است با ارسال یک شی جاوا اسکریپت به متد مشخص شوند browserSync :

mix.browserSync({
    proxy: 'laravel.test'
});

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

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

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

MIX_SENTRY_DSN_PUBLIC=http://example.com

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

process.env.MIX_SENTRY_DSN_PUBLIC

اطلاعیه

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

mix.disableNotifications();