کامپایل کردن assetها در لاراول (Laravel Mix)

کامپایل کردن assetها در لاراول (Laravel Mix)

استفاده از Laravel Mix در لاراول

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

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

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

 اگر در شروع به کار با Webpack و کامپایل کردن assetها سردرگم شده‌اید، به استفاده از Laravel Mix علاقه‌مند خواهید شد. با این حال، در زمان توسعه برنامه خود اجباری به استفاده از آن نخواهید داشت و می‌توانید از هر ابزار asset pipeline که بخواهید استفاده کنید یا حتی می‌توانید از هیچ کدام استفاده نکنید.

نصب و راه اندازی Laravel Mix در لاراول

نصب Node

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

node -vnpm -v

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

استفاده از لاراول میکس (Laravel Mix) در لاراول

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

npm install

اجرای Mix در لاراول

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

// Run all Mix tasks...
npm run dev 

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

رصد تغییرات در assetها

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

npm run watch

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

npm run watch-poll

کار با Stylesheetها در لاراول

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

Less فایل‌های

متد less در کامپایل کردن فایل‌های less به CSS کاربرد دارد. اجازه دهید، فایل اصلی app.less را به public/css/app.css کامپایل کنیم.

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

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

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

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

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

اگر بخواهید گزینه‌های پلاگین less پایه را بازنویسی کنید، می‌توانید یک شئ را به عنوان آرگومان سوم به mix.less()  ارسال کنید:

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

Sass فایل‌های

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

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

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

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

می‌توانید، گزینه‌های اضافی پلاگین Node-Sass را به عنوان آرگومان سوم انتقال دهید:

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

Stylus

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

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

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

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

 در لاراول PostCSS ابزار

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

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

CSS ساده

اگر بخواهید برخی از stylesheetهای ساده 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()  را در stylesheetهای خود بازنویسی و بهینه سازی می‌کند. این موضوع، یک ویژگی فوق العاده قدرتمند است. فرض کنید که بخواهیم یک Sass را کامپایل کنیم که حاوی URL مربوط به یک تصویر است:

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

مسیرهای مطلق برای هر  ()url از URL-rewriting حذف می‌شوند. برای مثال، آدرس

url('/images/thing.png')

یا

url('http://example.com/images/thing.png')

 تغییر نخواهند کرد.

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


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

این ویژگی می‌تواند از این نظر مفید باشد که ساختار دایرکتوری موجود به روشی که می‌خواهید پیکربندی شده است، می‌توانید بازنویسی url () را به صورت زیر غیر فعال کنید:


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

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


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

Source Map در لاراول

با وجود غیرفعال بودن source mapها در حالت پیش‌فرض ولی می‌توان با فراخوانی متد mix.sourceMaps()  در فایل webpack.mix.js آن را فعال کرد. source mapها در زمان استفاده از assetهای کامپایل شده، اطلاعات عیب یابی اضافی را به ابزار توسعه دهنده مرورگر ارائه می‌کنند.


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

در این مقاله از سری مقالات آموزشی لاراول، استفاده از ابزار laravel mix را مورد بررسی قرار دادیم. 

با تشکر از سرکار خانم الهه قنبری -  لیداوب

مطالب مشابه