Webpack قدرتمندترین و انعطاف پذیرترین ابزارکامپایل است که امروزه در دسترس است. با این وجود ، سطح پیچیدگی خاصی به وجود می آید.در اینجاست که Laravel Mix قدم می گذارد. با ادغام webpack میتوانید تسک های مناسبی را فعال کنید.
در این بخش ، من به شما آنچه را که باید بدانید از اصول اولیه ، تا پیکربندی پیشرفته به عنوان نگهدارنده Laravel Mix ، آموزش می دهم.
فهرست برنامه آموزشی
-
مدت آموزش 7:28
شروع به کامپایل کنید
بیایید با نصب وابستگی های ضروری شروع کنیم و در سریعترین زمان ممکن JavaScript و Sass را با استفاده از Mix کامپایل کنیم.
-
مدت آموزش 5:22
رمزگشایی اسکریپت های NPM
متوجه خواهید شد که Laravel تعدادی اسکریپت مفید NPM را برای ایجاد صفحه وب در اختیار شما قرار می دهد. برای شروع ، مهمترین موارد مربوط به dev، watch و prod است. در این درس ، ما این دستورات را رمزگشایی می کنیم تا اطمینان حاصل کنید که دقیقاً چه چیزی را ایجاد می کنید.
-
مدت آموزش 12:46
JavaScript Bundling
دستور ()mix.js روش go-to به هر نوع نیاز JavaScript bundling است و به ES2017 compilation ، tree shaking, minificationو موارد دیگر می پردازد. بیایید همه موارد مورد نیاز در این قسمت را بدانید.
-
مدت آموزش 12:25
The Ins and Outs of CSS Compilation
حالا که درک کردید چگونه JavaScript خود را کامپایل کنید ، به سراغ ابزار CSS برویم. شما Sass ، Less ، Stylus یا PostCSS را ترجیح می دهید.
-
مدت آموزش 6:57
افزودن پلاگین های PostCSS
PostCSS ممکن است به صورت مستقل یا حتی به عنوان یک مرحله ثانویه پس از کامپایل اصلی Sass / Less شما استفاده شود. در هر صورت ، نتیجه نهایی یکسان خواهد بود. افزونه های PostCSS را به عنوان لایه های پیاز تصورکنید. هر لایه این شانس را دارد که روی صفحه stylesheet شما کار کند ، و آن را به نوعی اصلاح کند. پس از اتمام کامل ، این style ها به لایه بعدی پیاز منتقل می شوند. بیایید این فرآیند را هنگام استفاده از Laravel Mix ببینیم.
-
مدت آموزش 3:23
به روزرسانی خودکار مرورگر
Mix provides out-of-the-box support for Browsersync, which allows us to detect and refresh the browser each time a relevant asset of yours has changed. No longer will you have to manually refresh the browser over and over to review small, visual tweaks.
-
مدت آموزش 4:51
Cache-Busting Assets
با فراخوانی `mix.version ()" یک یونیک hash برای هر فایل با تولید فایل "mix-manifest.json" اضافه می شود. این می تواند برای کمک به سرور شما هنگام استفاده از "حافظه پنهان" و دریافت نسخه جدیدی از asset استفاده شود.
-
مدت آموزش 3:16
Registering Additional Babel Plugins
در پشت صحنه ، Laravel Mix هنگام تغییر کد شما از پیش تنظیمات Babel's env استفاده می کند. با این وجود ، هر از گاهی ممکن است نیاز به ثبت پلاگین های اضافی داشته باشید. بیایید دقیقاً چگونگی انجام این کار را در این قسمت مرور کنیم.
-
مدت آموزش 7:09
Async/Await Support Out of the Box
Laravel Mix 1.7 and higher ships with async/await support out of the box. These two keywords simplify the process of working with promises in a more synchronous fashion.
-
مدت آموزش 7:36
Mix Extension Essentials
Laravel Mix 2.1 و بالاتر شامل پشتیبانی از پcustom user extensions است. در حقیقت ، بسیاری از مؤلفه هایی که Mix در پشت صحنه از آن استفاده می کند ، دقیقاً به همان شیوه ساخته شده اند. در این قسمت ، اصول اولیه API را می آموزیم. خواهید دید که بر اساس پیچیدگی مؤلفه جدید ، دو روش برای گسترش Mix وجود دارد.
-
مدت آموزش 14:34
Mix Extension را در 15 دقیقه بسازید و بکار بگیرید
اکنون که API اصلی برای ساختن برنامه های Mix extensions را درک کرده اید ، بیایید یک real-life extension را از طریق npm با هم بسازیم و مستقر کنیم ... در پانزده دقیقه!
