webpack
برای راحتی کد نویسی و استفاده از پکیج های مختلف NPM ، قابلیت Webpack در فرم-ورک پیاده سازی شده است. میتوانید css های قالب را با استفاده از less و فایل های javascript را به صورت JQuery و یا حتی Typescript بنویسید. فرم-ورک به صورت خودکار پکیج های مورد نیاز را دانلود و فایل های معرفی شده را بعد از کامپایل و در یک فایل در صفحه بارگذاری خواهد کرد.
برای استفاده از این قابلیت نیاز هست تا پکیج Webpack را برای کامپایل فایل ها در کنار پکیج اصلی استفاده کنید .
برای اطلاعات بیشتر در مورد پکیج های NPM به صفحه ی NPM مراجعه کنید
نصب
میتوانید همواره آخرین نسخه را از شاخه اصلی مخزن دانلود کنید: دانلود ZIP
یا اینکه مخزن را بصورت کامل در کنار پکیج اصلی کلون کنید:
git clone https://github.com/yeganemehr/webpack.git
راه اندازی
بعد از این میتوانید با مراجعه به پوشه ی اصلی پروژه، روند این پکیج را طریق خط فرمان فراخوانی کنید. این روند با استفاده از NPM تمامی پکیج های معرفی شده در فایل معرف قالب ها را دانلود کرده و با css و javascript هایی که در هر قالب نوشته اید، کامپایل میکند.
php index.php --process=packages/webpack/processes/webpack@run
برای اطلاعات بیشتر به صفحه ی روند مراجعه کنید
بعد از اجرای خط فرمان بالا، شاهد لاگ های بسیاری خواهید بود، باید منتظر باشید تا روند به انتها برسد.
پس از اتمام در پوشه ی هر قالب پوشه ای با عنوان node_modules ایجاد خواهد شد. نیاز به تغییر در فایل های این پوشه و همچنین در هنگام جابه جایی پکیج سایت نیازی به انتقال آن نخواهید داشت.
نکته: پس از تغییر در هریک از پکیج های npm و یا تغییر در کد های css و javascript نیاز هست تا این روند مجددا فراخوانی شود.
نکته: در هر بار فراخوانی این روند، در صورتی که پکیجی از npm قبلا دانلود شده باشد، مجددا دانلود نخواهد شد.
خروجی فقط دو فایل یکی برای css و دیگری برای javascript است و کمک بسیاری به سرعت بارگزاری سایت خواهد کرد.
برای فراخوانی فایل های css فقط نیاز هست تا در صفحه ی html متد loadCSS را صدا بزنید. این متد در کلاس packages/base/view تعریف شده و ظاهر ها با توجه به رابطه ی پدر-فرزندی از آن ارث بری دارند.
نمونه فراخوانی فایل های css
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title>My First Site</title>
<?php $this->loadCSS(); ?>
<head>
برای فراخوانی فایل های javascript فقط نیاز هست تا در صفحه ی html متد loadJS را صدا بزنید. این متد نیز در کلاس packages/base/view تعریف شده و ظاهر ها با توجه به رابطه ی پدر-فرزندی از آن ارث بری دارند.
نمونه فراخوانی فایل های javascript
<!DOCTYPE html>
<html lang="en" dir="ltr">
<body>
<?php $this->loadJS(); ?>
</body>
</html>
پاک سازی پکیج های NPM
متد clean در این روند تمامی پکیج های npm دانلود شده در هر قالب را حذف میکند.
php index.php --process=packages/webpack/processes/webpack@clean