Bower入门

Bower入门

新建项目

Client-side包在bower.json中列出。

Bootstrap，jquery，jquery-validation等。

添加对Fotoramar的插件管理：

Gulpfile.js中添加：

创建index.html文件

运行：

新建项目BowerTour

本实验将完成：

1. 定义和下载项目中使用到的包。
2. 安装包。
3. 在项目中使用。

定义包

添加以下配置文件：

NPM 配置文件package.json

 grunt and grunt-bower-task dependencies

Bower配置文件bower.json

Grunt配置文件 gruntfile.js

NPM安装相应的包

Bower.json

添加对bootstrap和jquery的依赖

保存后，bower会进行包的安装。

对web应用安装包

任务运行管理器

运行

cmd.exe /c grunt -b "C:UsersHeavy.HeDesktop提升MVC6VS2015WebBowerTourBowerToursrcBowerTour" --gruntfile "C:UsersHeavy.HeDesktop提升MVC6VS2015WebBowerTourBowerToursrcBowerTourGruntfile.js" bowerRunning "bower:install" (bower) task

在wwwroot目录下生成依赖的包。

删除wwwroot目录，

在bower.js中添加：

"exportsOverride": {

"bootstrap": {

"js": "dist/js/*.*",

"css": "dist/css/*.*",

"fonts": "dist/fonts/*.*"

},

"jquery": {

"js": "dist/jquery.{js,min.js,min.map}"

}

}

右键gruntfile.js，打开任务运行管理器，右键bower，运行。

则会重新生成如下：

使用安装的包进行web开发

在wwwroot下添加空的html文件。

将wwwroot/lib目录下的bootstrap.css拖放到head中，将bootstrap.js，jquery.js拖放到body中。

F5运行，查看index.html页面。

参考：

http://docs.asp.net/en/latest/client-side/bower.html