微軟Connect教程系列—VS2015集成新潮工具（四）

         本課程來源與微軟connect視頻教程，Modern Web Tooling in Visual Studio 2015

         本課程主要講下當下流行的前端工具 bower和grunt

         首先簡單介紹下這倆貨是幹什麼，而後再講下在vs2015中怎麼用

1、bower和grunt介紹

         bower是twitter開源的一款web包（如bootstrap、jquery）管理，依託github上愈來愈多的開源web（html+css+js）項目，bower只須要github項目加一個配置文件就可使用bower方式管理。bower提供了web包的添加、升級、刪除、發佈，以及管理包依賴，只需命令方式，便可輕鬆管理，不再須要去手工下載拷貝文件了。

         bower是依賴npm安裝的，但如今vs新建web項目時，已實現自動加載了，因此很省事。具體控制檯命令如何使用參考此文章

         grunt在官網上稱之爲javascript世界的構建工具，它的主要功能就是實現自動化，如壓縮js css、編譯、單元測試、linting(css代碼檢查)等

         總結一下，就如視頻中說的，bower相似於nuget，不過是服務於web前端的，同時vs也支持npm，即vs2015內置了兩款web前端的包管理工具：bower和npm。而grunt和gulp則提供了web前端的編譯功能，以及壓縮等（具體可看下圖說明）。這樣vs的先後端編譯都將支持，更牛了啊。

2、bower和npm在vs中的使用

        vs新建Asp.Net5 Starter Web項目後，會自動在項目中加載前端依賴，，以下圖

bower對應項目中的bower.json文件，此文件包含了你須要的依賴包，如bootstrap，jquery等，在此文件中編寫須要的依賴包，和相應的版本

vs會給予智能感知。具體看下圖。

也能夠鼠標懸浮在上面，上面會顯示出下載安裝包，以下圖

         相應的package.json則對應npm包管理工具，同bower同樣，也有智能感知，以下圖，感受這裏面的智能感知要優於bower.json的

保存後，在項目的右側便可看到grunt-contrib-cssmin未安裝，右鍵選擇restore package會自動下載該安裝包。

若是bower和npm中的包，都未下載，則在項目從新打開的時候，這些包依賴同nuget的包管理同樣，會自動初始化下載安裝這些包，很是方便智能。

         在package.json中你會發現，bower裏的庫package.json中也能下，如bootstrap，jquery等，那我直接在package.json中寫不就完了，但你會發現，這裏面寫的包文件，不會下載到wwwroot/lib文件夾下，而是配合gruntfile.js的loadNpmTasks方法。

         這樣你不用安裝node和npm，你就能夠在vs中暢快的使用bower和npm了。

3、grunt在vs中的使用

打開view—>other windows—>Task Runner Explorer,即打開grunt的任務運行面板

         一、在裏面分爲alias tasks和tasks，其中alias中的任務，是經過在gruntfile中註冊任務得來 grunt.registerTask("default", ["bower:install"]);

而tasks則是由 grunt.loadNpmTasks("grunt-contrib-copy")得來，這些包須要提早經過package.json聲明好。

         二、經過在任務上，右鍵run，進行執行壓縮、編譯等操做。

 

         三、實例：執行對wwwroot/css/pagination.css文件的壓縮

              a)首先我要先下載npm包,在package.json中輸入    "grunt-contrib-cssmin": "^0.10.0" ,並安裝該npm包

              b)在gruntfile.js的initConfig初始化該任務，輸入以下code

 cssmin: {
minify: {
src: 'wwwroot/css/pagination.css',
dest: 'wwwroot/css/pagination-mini.css'
}
}

                 並在gruntfile.js中註冊該任務 grunt.registerTask("cssmin", ["cssmin:minify"]);

              c)Task Runner Explorer中刷新，則Tasks的cssmin 下面就會多出一個minify，右鍵執行run便可。具體以下圖：

喜歡就支持下吧，您的支持是我最大的動力！