آموزش پایه ای لاراول 7 - Compiling Assets (Mix)

مقدمه

این مقاله آموزشی به آشنایی شما با مفاهیم مرتبط با Laravel Mix می پردازد.Laravel Mix  یک API ساده برای تعریف مراحل ساخت Webpack برای برنامه Laravel شما با استفاده از چندین pre-processor مشترک CSS و JavaScript فراهم می کند. از طریق متد chaining ، می توانید  asset pipeline خود را به سادگی تعریف کنید. مثلا:

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

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

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

نصب Node

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

node -v
npm -v

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

Laravel Mix

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

npm install

راه اندازیMix

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

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

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

Watching Assets برای تغییرات

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

npm run watch

ممکن است در بعضی از محیط ها هنگام تغییر فایل ها ، Webpack به روزرسانی نشود. اگر این مورد در سیستم شما وجود دارد ، استفاده از دستور watch-poll را در نظر بگیرید:

npm run watch-poll

کار با Stylesheet ها

فایل webpack.mix.js نقطه ورود شما برای کامپایل همه asset ها است. Mix task ها را می توان با هم chain کرد تا دقیقاً نحوه کامپایل asset های شما مشخص شود.

Less

برای کامپایل Less به CSS می توان از متد less استفاده کرد. بیایید فایل اصلی 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 کامپایل شده را customize کنید ، می توانید مسیر کامل فایل را به عنوان آرگومان دوم با متد less ارسال کنید:

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

اگر لازم است گزینه هایLess plug-in را override کنید ، می توانید یک object را به عنوان سومین آرگومان برای mix.less () ارسال کنید:

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

Sass

متد 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 plug-in می تواند به عنوان آرگومان سوم ارائه شود:

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

Stylus

مشابه 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 vendor prefix های ضروری را اعمال کند. با این حال ، شما می توانید plug-in های اضافی را که برای برنامه شما مناسب هستنداضافه کنید. ابتدا پلاگین مورد نظر را از طریق NPM نصب کرده و سپس آن را به فایلwebpack.mix.js ارجاع دهید:

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

Plain CSS

اگر فقط می خواهید برخی از CSS stylesheet های ساده را در یک فایل ادغام کنید ، می توانید ازمتد styles استفاده کنید.

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

URL Processing

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

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

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

ادامه دارد....