استفاده از Bower در ویژوال استدیو 2013

 همانطور که ذکر شد , مدیریت پکیج های مایکروسافت با Nuget می باشد اما در ویزوال استدیو 2015 مدیریت پکیج های سمت Client به Bower سپرده شده است , خوب این امر منطقی هم هست , تکنولوژی های سمت Client منحصر به مایکروسافت نمی شود و در حقیقت بخش اعظم بازار در اختیار تولید کنندگانی است که اصلا هیچ اشنایی با تکنولوژی های مایکروسافت ندارند مثل Jquery , BootStrap و ... 

مجبور کردن این تولید کنندگان به ساخت Nuget Pakage کار منصفانه ایی نمی باشد , اما با استفاده از Bower , درهای دنیایی از جدیدترین تکنولوژی های سمت Client به روی توسعه دهندگان .NET گشوده می شود (برای توضیحات بیشتر به مقاله Using Bower with Visual Studio 2013 مراجعه بفرمایید) .

شما برای استفاده از Bower در ویزوال استدیو 2013 باید مراحل زیر را طی کنید :

1 - دانلود و نصب Node

2 - نصب Bower  از خط فرمان Node (بعد از نصب Node در مسیر Programs\Node.js فایل Node.js command prompt اجرا کنید و دستور npm install bower -g را وارد کنید)به شکل زیر :

3 - نصب Git :

Bower  از Git برای دانلود پکیج ها از GitHub استفاده می کند , لذا شما باید MsysGit را دانلود و هنگام نصب گزینه “Run Git from the Windows Command Prompt” را همانند شکل زیر انتخاب نمایید .

 برای توضیحات بیشتر می توانید به ادرس https://github.com/bower/bower مراجعه بفرمایید .

4 - مقدار دهی اولیه Bower برای پروژه (لایه UI) ساخته شده در ویزوال استدیو 2013 با اجرای دستور Bower Init به شکل زیر :

تمام تنظیمات پیش فرض مناسب است و نیازی به تغییر ندارد به استثناء Private شدن پروژه برای جلوگیری از انتشار تصادفی پروژه در رجیستری عمومی Bower  , بعد از اجرای دستور فوق فایلی به نام bower.json در مسیر فیزیکی پروزه شما (لایه UI) ساخته می شود . تمام اطلاعات پکیج های نصب شده شما در این فایل ذخیره می گردد .

5 - جایگزینی پکیج های Nuget با پکیج های Bower :

پروژه از نوع Asp.Net MVC 5.0 دارای پکیج های پیش فرض jQuery, jQuery Validation, Bootstrap وModernizr از نوع Nuget می باشد شما می توانید این پکیج ها را با پکیج های از نوع Bower عوض کنید . البته انجام این کار برای MVC در ویژوال استدیو 2013 ممکن است مقداری کار شما را زیاد کند , اما مثلا برای UI از نوع Angular این امر بسیار مفید خواهد بود .

خوب اجازه دهید کار را با نصب پکیج Jquery شروع کنیم , پکیج های Bower از خط فرمان نصب می شوند , برای نصب Jquery  کافی است دستور زیر را وارد کنید (ابتدا دایرکتوری جاری خط فرمان را به مسیر فیزیکی پروزه (لایه UI) ببرید) :

bower install jquery --save

به طور پیش فرض تمام پکیج های دانلود شده شما در فولدر bower_components در مسیر فیزیکی پروزه شما (لایه UI) ذخیره می شوند , شما نیازی ندارین این فولدر را در پروژه Include کنید و یا در Source Control چک کنید , پکیج ها در هر جای با دستور bower install مجددا" نصب می شوند همانند شکل زیر :

 6 - نصب الباقی پکیج ها بعلاوه RespondJs که در پکیج BootStrap در Bower بر عکس Nuget وجود ندارد و شما باید این پکیج را جداگانه نصب کنید با دستورات زیر :

bower install jquery-validation --save
bower install jquery-validation-unobtrusive --save
bower install modernizr --save
bower install bootstrap --save
bower install respond-minmax --save

حال که تمام پکیج های مورد نیاز را نصب کردیم , فایل bower.json به شکل زیر درآمده است :

{
   "name": "BowerInVS2013",
   "version": "0.0.0",
   "license": "MIT",
   "private": true,
   "dependencies": {
   "jquery": "~2.1.3",
   "modernizr": "~2.8.3",
   "jquery-validation": "~1.13.1",
   "bootstrap": "~3.3.1",
   "respond-minmax": "~1.4.2",
   "jquery-validation-unobtrusive": "~3.2.2"
  }
}

7 - کار با فولدر  bower_components :

بعضی از افراد مستقیما" با فولدر bower_components  کار می کنند , یعنی فولدر bower_components  را به پروژه Include می کنند و فایل های Css و جاوااسکریپت درون فولدر را رفرنس می کنند . اما فولدر bower_components دارای محتویات خیلی بیشتر از نیاز ماست , روش بهتر کپی فایل های مورد نیاز از bower_components به یک مکان مشخص و رفرنس کردن از آن مکان مشخص می باشد . این کار را می توان توسط یک Client Build System مثل Grunt یا Gulp به صورت اتوماتیک درآورد , ترجیح خود من استفاده از Gulp می باشد . 

 برای Gulp ما نیاز داریم ماجول های مورد نیاز Node با دستورات زیر را نصب کنیم :

npm install gulp --save-dev
npm install gulp-concat --save-dev
npm install gulp-uglify --save-dev
npm install del --save-dev
npm install gulp-bower --save-dev
npm install gulp-minify-css --save-dev
npm install gulp-copy --save-dev
npm install gulp-sourcemaps --save-dev

بعد از نصب برای اینکه حالت Bundle در MVC شبیه سازی شود باید فایل GulpFile.js در ریشه برنامه به شکل زیر باشد :

///

// include plug-ins

var gulp = require('gulp');

var concat = require('gulp-concat');

var uglify = require('gulp-uglify');

var del = require('del');

var minifyCSS = require('gulp-minify-css');

var copy = require('gulp-copy');

var bower = require('gulp-bower');

var sourcemaps = require('gulp-sourcemaps');

var config = {

//JavaScript files that will be combined into a jquery bundle

jquerysrc: [

'bower_components/jquery/dist/jquery.min.js',

'bower_components/jquery-validation/dist/jquery.validate.min.js',

'bower_components/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js'

],

jquerybundle: 'Scripts/jquery-bundle.min.js',

//JavaScript files that will be combined into a Bootstrap bundle

bootstrapsrc: [

'bower_components/bootstrap/dist/js/bootstrap.min.js',

'bower_components/respond-minmax/dest/respond.min.js'

],

bootstrapbundle: 'Scripts/bootstrap-bundle.min.js',

//Modernizr

modernizrsrc: ['bower_components/modernizr/modernizr.js'],

modernizrbundle: 'Scripts/modernizer.min.js',

//Bootstrap CSS and Fonts

bootstrapcss: 'bower_components/bootstrap/dist/css/bootstrap.css',

boostrapfonts: 'bower_components/bootstrap/dist/fonts/*.*',

appcss: 'Content/Site.css',

fontsout: 'Content/dist/fonts',

cssout: 'Content/dist/css'

}

// Synchronously delete the output script file(s)

gulp.task('clean-vendor-scripts', function (cb) {

del([config.jquerybundle,

config.bootstrapbundle,

config.modernizrbundle], cb);

});

//Create a jquery bundled file

gulp.task('jquery-bundle', ['clean-vendor-scripts', 'bower-restore'], function () {

return gulp.src(config.jquerysrc)

.pipe(concat('jquery-bundle.min.js'))

.pipe(gulp.dest('Scripts'));

});

//Create a bootstrap bundled file

gulp.task('bootstrap-bundle', ['clean-vendor-scripts', 'bower-restore'], function () {

return gulp.src(config.bootstrapsrc)

.pipe(sourcemaps.init())

.pipe(concat('bootstrap-bundle.min.js'))

.pipe(sourcemaps.write('maps'))

.pipe(gulp.dest('Scripts'));

});

//Create a modernizr bundled file

gulp.task('modernizer', ['clean-vendor-scripts', 'bower-restore'], function () {

return gulp.src(config.modernizrsrc)

.pipe(sourcemaps.init())

.pipe(uglify())

.pipe(concat('modernizer-min.js'))

.pipe(sourcemaps.write('maps'))

.pipe(gulp.dest('Scripts'));

});

// Combine and the vendor files from bower into bundles (output to the Scripts folder)

gulp.task('vendor-scripts', ['jquery-bundle', 'bootstrap-bundle', 'modernizer'], function () {

});

// Synchronously delete the output style files (css / fonts)

gulp.task('clean-styles', function (cb) {

del([config.fontsout,

config.cssout], cb);

});

gulp.task('css', ['clean-styles', 'bower-restore'], function () {

return gulp.src([config.bootstrapcss, config.appcss])

.pipe(concat('app.css'))

.pipe(gulp.dest(config.cssout))

.pipe(minifyCSS())

.pipe(concat('app.min.css'))

.pipe(gulp.dest(config.cssout));

});

gulp.task('fonts', ['clean-styles', 'bower-restore'], function () {

return

gulp.src(config.boostrapfonts)

.pipe(gulp.dest(config.fontsout));

});

// Combine and minify css files and output fonts

gulp.task('styles', ['css', 'fonts'], function () {

});

//Restore all bower packages

gulp.task('bower-restore', function () {

return bower();

});

//Set a default tasks

gulp.task('default', ['vendor-scripts', 'styles'], function () {

});

اجرای دستور Gulp از خط فرمان موجب ساخت فایل های js و css تعریف شده در فایل GulpFile.js می شود یعنی تعدادی فایل min.js در فولدر Script ساخته می شود و تعدادی فایل css و Font در فولدر Contents/dist ساخته می شود , همانند شکل زیر :

شما باید این فایل ها را در ویژوال استدیو Include کنید

8 - حذف Nuget Pakage ها

حالا که ما تمام css و js ها را به صورت Bundle داریم , می توانیم با دستورات زیر Nuget Pakage متناظر را حذف کنیم :

Uninstall-Package Microsoft.jQuery.Unobtrusive.Validation
Uninstall-Package jQuery.Validation
Uninstall-Package Bootstrap
Uninstall-Package jQuery
Uninstall-Package Respond
Uninstall-Package Modernizr

حالا فولدر Scripts بسیار خلوت تر است و تنها شامل فایل هایی است که به عنوان خروجی gulp ساخته شده است همانند شکل زیر :

9 - استفاده از Script و Style های ساخته شده

شما باید در فایل Views\Shared\_Layout.cshtml دستورات زیر را

@Styles.Render("~/Content/css")

@Scripts.Render("~/bundles/modernizr")

به

<link rel="stylesheet" href="~/Content/dist/css/app.min.css">
<script src="~/Scripts/modernizer-min.js"></script>

تغییر دهید و دستورات زیر را

@Scripts.Render("~/bundles/jquery")

@Scripts.Render("~/bundles/bootstrap")

به

<script src="~/Scripts/jquery-bundle.min.js"></script>
<script src="~/Scripts/bootstrap-bundle.min.js"></script>

تغییر دهید و در نهایت تمام رفرنس ها به jquery validation را حذف کنید , زیرا ما jquery validation را به jQuery bundle اضافه کرده ایم .

@section Scripts { @Scripts.Render("~/bundles/jqueryval") }

برای کامل کردن این مرحله شما باید فایل App_Start/BundleConfig.cs را حذف کنید و صدا زدن RegisterBundles در فایل Global.asax.cs را نیز حذف کنیم .

10 - مطمئن شدن از اجرای gulp قبل از اجرای برنامه

 در حال حاضر gulp باید از خط فرمان به صورت دستی توسط برنامه نویس اجرا گردد ,  برای اتوماتیک کردن این فرایند شما می توانید از ابزار Task Runner Explorer استفاده کنید . ابزار مورد نظر را از View –> Other Windows –> Task Runner Explorer اجرا کنید و default gulp task را انتخاب و سپس Bindings –> Before Build را انتخاب کنید . حالا gulp task پیش فرض همواره قبل از ساخت برنامه در ویژوال استدیو اجرا می شود .

این امر برنامه نویس را مطمئن می سازد فایل های ساخته شده توسط gulp کاملا" آپدیت می باشند .

 نتیجه گیری:

خوب حالا برنامه ما تمام رفرنس های کتابخانه های سمت کلاینت خود را به کمک Bower مدیریت می کند و تمام Bundle های خود را نیز به کمک Gulp می سازد . در Bower  نسبت به Nuget ما به کتابخانه بزرگتر و بروزتری از پکیج های سمت کلاینت دسترسی داریم .

به کمک Gulp , ما دیگر وابسته به سیستم Bundling / Minification در Asp.Net MVC نیستیم و در معماری های دیگر مثل SPA و ... دستمان بسیار بازتر است .

این روش بسیار هماهنگ تر با دنیای ساخت وب غیر مایکروسافتی است و برای مهاجرت به نسخه های بعدی Asp.Net نیز کار برنامه نویس بسیار ساده تر خواهد بود .