www.dntips.ir
مطالب ۳۶۹۴
نویسندگان ۲۷۶
گروه‌های مطالب ۱۰۲۴
نقشه‌های راه ۱۱۹
دوره‌ها ۱۴
اشتراک‌ها ۱۷۹۱۴
عنوان:

‫استفاده از bower در visual studio


نویسنده: مهرداد کاهه
تاریخ: ۱۳۹۴/۰۷/۱۷ ۱:۰
آدرس: www.dntips.ir
اگر از آن دسته افرادی هستید که با پکیج‌های مختلف و پروژه‌های مختلف تحت کلاینت سر و کار دارید و همچنین اطلاعات چندانی نسبت به NodeJs ندارید (مثل خود من)، حتما به پروژه‌هایی در Github برخوردید که نیازمند نصب وابستگی‌ها از خط فرمان bower و یا npm هستند.
بعد از مطالعه‌ی مطلب آشنایی با bower این نیاز ایجاد شد تا در پروژه‌هایی که قرار است درون Visual Studio اجرا شوند، وابستگی‌های bower چگونه می‌توانند مدیریت شوند.
خوشبختانه Microsoft این امکان را ایجاد کرده تا شما بتوانید پروژه‌هایی را که وابستگی‌هایشان درون bower تعریف شده را نیز درون Visual Studio حل و فصل کنید. در ادامه تمامی این مراحل، قدم به قدم اضافه تشریح شده است.
قابل ذکر است که هر سه package manager معروف npm، bower و Nuget در ویژوال استدیو 2015 به صورت توکار موجود هستند. 
جزیات بیشتر در مستندات مایکروسافت


معرفی پکیج Bower

همانطور که در مقاله آشنایی با bower نیز اشاره شد، bower یک package manager برای تکنولوژی‌ها و کتابخانه‌های کلاینت است. این package manager بر روی Git اجرا می‌شود. همانطور که می‌دانید تمامی پکیج‌ها نیز از Git دریافت می‌شود.
اما حال اینکه چگونه می‌توان از این package manager در سمت Visual studio بدون نصب NodeJs و Git استفاده کرد، با پکیج توسعه داده شده Bower مایکروسافت رفع شده‌است.
جزئیات این پکیج را میتوانید در NuGet  مطالعه کنید.


شروع کار با Bower

برای آغاز، یک پروژه‌ی web Application ایجاد می‌کنیم. من Empty را انتخاب و ریسورس‌های MVC را هم اضافه کردم.
حال در بخش Package Manager Console دستور زیر را اجرا کنید:
Install-Package Bower
پس از نصب وابستگی‌ها و خود bower خروجی package manager console به صورت زیر خواهد بود:

مشاهده می‌کنید که فولدر .bin به پروژه‌ی شما اضافه شده است.

 حال درون صفحه‌ی cmd (توجه کنید cmd، نه package manager console) به آدرس پروژه (نه solution) با دستور زیر منتقل شوید:

cd <Project Location>

که به جای project location آدرس فایل پروژه را قرار می‌دهیم. شکل زیر نمایانگر این مسیر است:

با اجرای دستور زیر bower.json را به پروژه اضافه می‌کنیم:

bower init

مشاهده می‌کنید که پس از دستور bower init مواردی که قرار است درون bower قرار گیرد، مقدار دهی می‌شوند. من مقادیر را به صورت زیر (حالت‌های پیش فرض) تکمیل کردم:

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

bower install jquery

پکیج JQuery به صورت زیر دانلود می‌شود و در پوشه‌ی bower_component در روت پروژه قرار می‌گیرد.

به همین صورت شما می‌توانید تمامی نیازمندی‌های پروژه را از Git با استفاده از bower package manager دریافت کنید.

مطالب مشابه

نظرات

  • مهدی ملائیان در ۱۳۹۵/۰۵/۱۴ ۱۱:۳۹
    من مراحل بالا رو انجام دادم و package مورد نظر خودم رو از Git با فرمان زیر انجام داد :
    D:\Project\BowerTest\BowerTest>bower install bootstrap-rtl
    و خروجی زیر رو دریافت کردم :
    bower bootstrap-rtl#*   cached https://github.com/morteza/bootstrap-rtl.git#3.4.0
bower bootstrap-rtl#* validate 3.4.0 against https://github.com/morteza/bootstrap-rtl.git#*
bower bootstrap-rtl#~3.4.0   install bootstrap-rtl#3.4.0
    
bootstrap-rtl#3.4.0 bower_components\bootstrap-rtl
    اما اتفاقی در پروژه من رخ نداد (عدم بروز رسانی فایل‌های CSS موجود در پوشه Content) ؟لطفا راهنمائی کنید.
     
    • وحید نصیری در ۱۳۹۵/۰۵/۱۴ ۱۱:۴۵
      در ریشه‌ی پروژه، محتوای پوشه‌ی جدید bower_components را بررسی کنید.
      • مهدی ملائیان در ۱۳۹۵/۰۵/۱۴ ۱۳:۲۶
        ممنون آقای نصیری. دو پوشه با نام فوق اضافه شده است و هر دو پوشه رو Inlude کردم به پروژه .ولی هیچ فایل Css ای در این دو پوشه وجود نداشت .نهایتا این دو فایل رو add  کردم به پوشه bootstrap-rtl و فایل Layout رو به شکل زیر اصلاح کردم .
        <link href="~/bower_components/bootstrap-rtl/bootstrap-rtl.min.css" rel="stylesheet"/>
        آیا جایی از کار مشکل داره؟کدام فایل Jquery برای استفاده از قالب بایستی مورد ارجاع قراربگیره؟
        • وحید نصیری در ۱۳۹۵/۰۵/۱۴ ۱۳:۵۰
          - برای مشاهده‌ی تمام فایل‌ها (خصوصا مواردی که خارج از سیستم ویژوال استودیو اضافه می‌شوند) باید show all files را انتخاب کنید:

          - برای کار با bower در ویژوال استودیو فقط کافی است فایل استاندارد کانفیگ آن‌را اضافه کنید:


          سپس محتوای این فایل bower.json را به نحو ذیل تغییر داده و ذخیره کنید:
          {
   "name": "asp.net",
   "private": true,
    "dependencies": {
        "bootstrap-rtl":""
    }
}
          با ذخیره کردن آن، کار restore فایل‌ها در پوشه‌ی bower_components به صورت خودکار انجام می‌شود.
          - فایل‌های نهایی که باید استفاده شوند، در پوشه‌های dist آن قرار دارند (distribution).
          در این مورد خاص، نیاز خواهید داشت به فایل‌های توزیع بوت استرپ اصلی و همچنین به بوت استرپ راست به چپ:
          bower_components\bootstrap\dist\css\bootstrap.min.css
bower_components\bootstrap-rtl\dist\css\bootstrap-rtl.min.css

bower_components\jquery\dist\jquery.min.js
bower_components\bootstrap\dist\js\bootstrap.min.js
    • مهرداد کاهه در ۱۳۹۵/۰۵/۱۴ ۱۲:۴۶
      در لحظه‌ای که این فایل‌ها دریافت میشوند، به این دلیل که در محیط خارج از VS این عملیات دریافت اتفاق میافتد، بنابراین در VS این فایل‌ها وجود ندارند، چون این فایل‌ها هنوز در فایل مدیریت منابع پروژه csproj نگاشته نشده‌اند. شما میتونید با include کردن این فایل‌ها در VS، در واقع آنها را به فایل csproj پروژه اضافه کنید که دیگر درون فولدرهای پروژه در VS نیز قابل مشاهده باشند.
  • امیر هاشم زاده در ۱۳۹۵/۱۰/۰۹ ۱۳:۰
    هنگامی که در خط فرمان دستور:
    Install-Package bower
    صادر کنید، خطای زیر در پاور شل نیوگت نمایش داده می‌شود:
    Attempting to resolve dependency 'Node.js (≥ 0.10.28)'.
Attempting to resolve dependency 'NoGit (≥ 0.0.8)'.
Installing 'Node.js 0.10.28'.
Successfully installed 'Node.js 0.10.28'.
Installing 'NoGit 0.0.8'.
Install failed. Rolling back...
Install-Package : The specified path, file name, or both are too long. The fully qualified file name must be less than 260 characters, and the directory name must be less than 248 
characters.At line:1 char:1
+ Install-Package bower
+ ~~~~~~~~~~~~~~~~~~~~~
    + CategoryInfo          : NotSpecified: (:) [Install-Package], PathTooLongException
    + FullyQualifiedErrorId : NuGetCmdletUnhandledException,NuGet.PowerShell.Commands.InstallPackageCommand
    جهت رفع این خطا بهتر است ابتدا بسته NoGit و سپس بسته Bower نصب نمایید.
  • وحید نصیری در ۱۳۹۷/۰۱/۳۰ ۹:۳۳