ادغام Bower با فریم ورک Symfony

ادغام Bower با فریم ورک Symfony

همانطور که می دانید Symfony تمام پکیج‌های خود را با استفاده از پکیج منیجر Composer مدیریت می کند. Bower‌ هم یک پکیج‌منیجر برای مدیریت پکیج‌های front-end مثل Bootstrap یا jQuery است. در این پست می خواهم نشان دهم که چطور در کنار یک پروژه سیمفونی می توانیم از Bower استفاده کنیم. انجام این کار بسیار ساده است. ما همچنین در این پروژه از Gulp هم استفاده می کنیم.

 

نصب سیمفونی

 

ابتدا یک پروژه جدید سیمفونی با دستور symfony new my-new-project ایجاد کنید. من در این پست قصد ندارم طریقه نصب Symfoyn را نشان دهم، اما اگر چنانچه سیمفونی را نصب نکرده اید پیشنهاد می شود نصب و راه اندازی سیمفونی را مطالعه کنید. در این پست از symfony3 استفاده کرده ام.

 

تمیز نگه داشتن پروژه

 

سیمفونی هنگام نصب، بطور پیشفرض Bundle اضافی را به فریم‌ورک اضافه می کند، اگر دوست دارید می توانید آن را حذف کنید:

 

  • به پروژه خود مراجعه کنید و پوشه AppBundle در آدرس src/ را پاک کنید
  • از فایل app/appKernel.php آدرس پکیج AppBundle که بصورت new AppBundle\AppBundle() در آرایه  $bundles قرار گرفته شده است را پاک کنید
  • route باندل AppBundle را از آدرس app/config/routing.yml پاک کنید

 

ایجاد Bundle جدید

 

دستور زیر را در ترمینال خود اجرا کنید تا یک Bundle جدید برای ما جنریت شود:

 

 

این دستور یک ‌Bundle جدید با نام myBundle در پوشه src/ ایجاد می شود.

 

حال با دستور php bin/console server:run در خط فرمان سرور را اجرا کنید و به آدرس http://localhost:8000/ مراجعه کنید تا مطمئن شویم مشکلی وجود ندارد.

 

نصب Bower

 

Bower بر پایه Node.js ساخته شده است، مطمئن شوید آن را نصب کرده اید. اگر Node را نصب نکرده اید به nodejs.org مراجعه کنید یا نصب Node.js و NPM در Linux را مطالعه کنید (من به شخصه از NVM برای نصب Node استفاده می کنم). پس از نصب Node دستور زیر را در خط فرمان خود اجرا کنید تا Bower نصب شود:

 

 

چناچه اگر نمی خواهید از NodeJS استفاده کنید، می توانید از BowerPHP برای مدیریت بسته‌ها استفاده کنید.

 

پیکربندی Bower

 

در مرحله بعدی نیاز داریم که فایل bower.json را ایجاد کنیم. این فایل همانند composer.json عمل می کند اما برای پکیج‌های front-end کاربرد دارد. این فایل را بسادگی می توانید با دستور bower init ایجاد کنید، یا بطور دستی آن را ساخته و json زیر را به آن اضافه کنید:

 

 

بطور پیشفرض Bower تمام بسته‌ها را در دایکتوری bower_components/ ذخیره می کند. در سیمفونی تنها فایل‌هایی که در دایکتوری web/ قرار گیرند بصورت public قابل دسترسی هستند، بنابراین لازم است که Bower را تنظیم کنیم. برای این کار تنها کافیست یک فایل .bowerrc با آدرس جدید زیر درست کنید:

 

 

اگر از ابزارهای Gulp یا Grunt استفاده می کنید می توانید آدرس دایرکتوری را هر کجا که دوست دارید تنظیم کنید. اما معمولا این ابزارها تمام منابع را به دایکتوری web/ منتقل می کنند.

 

 

در این پست قصد ندارم جزئیات بیشتری درباره Bower را بیان کنم. می توانید مستندات بسیار خوبی را در سایت Bower پیدا کنید. همچنین به آموزش‌های زیر در رابطه با Bower دسترسی دارید:

 

 

نصب Bootstrap و Angular

 

حال آماده هستیم که چیزهایی مثل Bootstrap و Angular را به پروژه اضافه کنیم. به عنوان مثال برای دانلود و نصب این بسته ها دستور زیر را در خط فرمان اجرا کنید:

 

 

این دستور bootstrap و angular را در آدرس web/assets/vendor/ نصب می کند:

 

آموزش نصب symfony و bower

 

برای اطلاعات بیشتر به مستندات bower مراجعه کنید.

 

خودکار سازی task با GulpJS

 

برای استفاده از Gulp باید آن را بصورت global نصب و به پروژه اضافه کرد:

 

 

بعد از نصب Gulp بطور دستی فایل gulpfile.js را در ریشه پروژه خود ایجاد کنید. در این فایل به Gulp گفته می شود که دقیقا چه فایل‌هایی را مورد پردازش قرار دهد. برای تست به تعدادی ابزار برای Gulp نیاز داریم. به عنوان مثال اگر می خواهید از Less در پروژه استفاده کنید ابتدا باید آن را نصب کنید و بعد وظیفه Gulp است که آن را به CSS کامپایل کند. همچنین می توانید برای بهینه سازی، الحاق کردن، فشرده سازی و غیره از بسته های زیر استفاده کنید:

 

 

حال برای اینکه jQuery و AngularJS و Bootstrap توسط فایل gulpfile.js مورد پردازش قرار گیرد از task‌های زیر استفاده می کنیم:

 

 

لینک کردن منابع به قالب (Template)

 

در این مرحله برای اینکه در قالب خود از Bootstrap یا jQuery‌ استفاده کنیم میم توانیم قالب زیر را در آدرس src/myBundle/Resources/views/Default/index.html.twig ویرایش کنید:

 

 

به آدرس http://localhost:8000/ مراجعه کنید و Hello,World را مشاهده کنید. با کلیک راست کردن در صفحه و زدن View page source خواهید دید که فایل های CSS/JS به درستی به قالب لینک شده اند.

 

کارتان عالیه! شما حالا Bootstrap در پروژه خود دارید و می توانید از آن لذت ببرید.

 

برای اطلاعات بیشتر در مورد Gulp و چگونگی نوشتن Task پیشنهاد می شود راه اندازی Bootstrap Sass، Bower، Gulp و FontAwesome مطالعه کنید.


  • همین امروز پروژه داشبورد آماریم رو شروع کردم و تصمیم گرفتم برای فرانتند استاندارد عمل کنم. دقیقا همین مسیر رو برای لاراول رفتم و زد به سرم یجایی مستندش کنم. الان که مطلبتو دیدم به این نتیجه رسیدم که تو عالی عمل می‌کنی پسر 😉

    • پاتریک درآواکیانس

      خیلی هم خوب. 🙂
      خیلی منون داداش. خوشحالم می شم که نظر مثبت میدید. 😉

  • محمود

    خودم دولوپرم
    سایت های با چنین مضامینی رو گاهاً بازدید میکنم

    از به روز بودن مطالب و اینکه سراغ Laravel نرفتید و به سمت Symphony خیلی خوشم اومد , به نظر من لاراول بیشتر یه مدل برنامه نویسی با سیمفونیه تا اینکه خودش مستقلاً یه فریم ورک باشه
    من عشق شب و روزم Phalcon php و jQuery هستش و بوده

    الان کمی سخته برام از Angular که در سایر مطالب ازش گفتید استفاده کنم هرچند خودم 1سال و نیم پیش باهاش آشنا شدم و دولوپرهاش هم سرشناس هستن ولی برام سخته از مدلهای ذهنیم دل بکنم 🙂
    درحال کلنجار بر سرکنار اومدن با Angular هستم امیدوارم بتونم ازش واقعاً استفاده کنم

    آقا پاتریک کارت درسته 🙂
    در ضمن یه رفیق دارم اسمش “آربی” هستش مثل شما خیلی گله

    • پاتریک درآواکیانس

      خیلی هم خوب. نظر لطفتونه مرسی 😉
      بله ابتدا سراغ Laravel رفتم اما بعدا ترجیح دادم با Symfony کار کنم. در کل همه فریم ورک ها یه جورن، مهم اینه که دولوپر با کدوم ارتباط برقرار کنه. Angular یادگیریش کاری نداره خیلی خوبه در کل، پیشنهاد می کنم یه نگاهی بهش بندازید.
      آربی؟؟!! ارگ فامیلیش “سرکیسیان” باشه که می شناسم. یکی از دوستای خوبمه. 😉
      مرسییییی ;))))))