VS2015集成新潮工具（四）
本課程來源與微軟connect視頻教程，Modern Web Tooling in Visual Studio 2015
本課程主要講下當下流行的前端工具 bower和grunt
首先簡單介紹下這倆貨是干什么，然后再講下在vs2015中怎么用
一、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的前后端編譯都將支持，更牛了啊。
二、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了。
三、grunt在vs中的使用
打開view—>other windows—>Task Runner Explorer,即打開grunt的任務運行面板
1、在里面分為alias tasks和tasks，其中alias中的任務，是通過在gruntfile中注冊任務得來 grunt.registerTask("default", ["bower:install"]);
而tasks則是由 grunt.loadNpmTasks("grunt-contrib-copy")得來，這些包需要提前通過package.json聲明好。
2、通過在任務上，右鍵run，進行執行壓縮、編譯等操作。
3、實例：執行對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即可。具體如下圖：
喜歡就支持下吧，您的支持是我最大的動力！