آموزش استفاده از Grunt برای مدیریت وظایف تکراری - Grunt (جلسه 32) - تزریق اتوماتیک بسته های Bower به فایلهای HTML

- visibility ۰ mode_comment

در این مطلب با ادامه آموزش Grunt در خدمتتون هستیم.

grund

در این جلسه قصد داریم در مورد پلاگین grunt-wiredep صحبت کنیم و با استفاده از اون کاری کنیم که بصورت اتوماتیک بسته های Bower به داخل فایلهای HTML اضافه و تزریق بشه و دیگه لازم نباشه خودمون بصورت دستی بسته های Bower رو درون کدهای HTML قرار بدیم. من قبلا و در این پست نحوه کار با Bower و نصب بسته های مختلف با استفاده از اون براتون توضیح دادم. در ابتدا باید این پلاگین رو در پروژه خودمون نصب کنیم. برای اینکار عبارت زیر رو در cmd قرار میدیم:

بعد از اینکار اینتر میزنیم:grunt wiredep install

میبینید که این پلاگین بدون ارور درون پروژه ما نصب شده و حالا اگر package.json رو ببینید، بصورت زیر بروز رسانی شده:grunt wiredep install 2

حالا باید این بسته رو درون gruntfile.js لود کنیم:grunt wiredep install 3

حالا باید برای پروژه خودمون Bower رو تنظیم کنیم. برای اینکار در cmd و در ریشه پروژتون عبارت bower init رو وارد کنید و اینتر بزنید. یکی یکی به سوالات جواب بدید و اینتر بزنید.grunt bower setup

با اینکار یک فایل جدید بنام bower.json در پروژه ما ساخته میشه و کدهای زیر درون اون قرار میگیره:

همینطور که میدونین Bower بسته های متنوعی رو در خودش داره که میتونین در اینجا همه اونا رو ببینید. ما در این مطلب bootstrap و animate.css رو با استفاده از bower نصب میکنیم. برای اینکار درون cmd عبارت bower install bootstrap animate.css --save رو تایپ میکنیم و اینتر میزنیم. این ابزار به سرور وصل میشه و تمام موارد مورد نیاز رو برای شما دانلود و نصب میکنه. بعد از چند لحظه توضیحات زیر در cmd به شما نمایش داده میشه و میفهمید که با موفقیت بسته های مورد نظر نصب شدن. بصورت زیر:grunt bower setup 2

میبینید که بسته های مورد نظر نصب شدن و اگر پوشه پروژتون رو نگاه کنید، یک پوشه جدید بنام bower_components اضافه شده و بسته های مورد نظر درون اون قرار گرفته. حالا برای اینکه wiredep رو تست و استفاده کنیم، یک فایل بنام index.html درون پوشه final میسازیم و کدهای زیر رو درونش قرار میدیم:

برای اینکه به wiredep بگیم که فایلهای js و css رو کجا بزاره، باید بصورت زیر عمل کنیم:

دیدید که در قسمت head دو کامنت اضافه کردیم و bower:css گذاشتیم. با این کار به wiredep میگیم که فایلهای css رو اینجا قرار بده. کار مشابهی رو هم برای js انجام دادیم.

حالا باید در gruntfile.js یک وظیفه برای wiredep بسازیم. برای اینکار بصورت زیر عمل میکنیم:grunt wiredep task

دیدید که درون ویژگی src آدرس فایل html رو بهش دادیم. حالا cmd رو باز کنید و عبارت grunt wiredep رو تایپ کرده و اینتر بزنید:grunt wiredep task 2

میبینید که وظیفه مورد نظر انجام شد. حالا اگر مجددا به فایل index.html نگاه کنید، میبینید که فایلهای css و js مورد نظر به زیبایی اضافه شدن:

فایلهای مورد نظر بین کامنتهایی که قبلا قرار دادیم، گذاشته شدن. اینکه wiredep خوب کار کنه یا نه، به بسته مورد نظر بستگی داره و اینکه ابزاری مثل jquery به درستی تنظیمات bower رو انجام داده باشه.

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

در جلسات بعدی بیشتر در مورد Grunt صحبت میکنیم.

امیدوارم از این جلسه خوشتون اومده باشه.

موفق باشید

یا علی

comment دیدگاه کاربران

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.