您的位置：首页 > Web前端

前端工具bower wiredep

2016-01-06 16:06 281 查看

Bower是一个客户端技术的软件包管理器，它可用于搜索、安装和卸载如JavaScript、HTML、CSS之类的网络资源。

详细信息请参考 bower官网。

几个例子：

1.当前项目需要引入jquery

bower install jquery

只需上面简单一条命令就可以将jquery库已经其依赖的库下载下来。直接就可以在项目中引用相关的文件就可以了。

2.使用bower.json

{
"name": "bower demo",
"version": "2.9.0",
"homepage": "",
"authors": [
"xiaopeng <lost1q84@gmail.com>"
],
"description": "bower.json test project",
"keywords": [
"test"
],
"license": "MIT",
"ignore": [
"node_modules",
"bower_components",
"test",
"tests"
],
"dependencies": {
"jquery": "~2.1.0",
"angular": "~1.3.15",
"angular-animate": "~1.3.15",
"angular-ui-router": "~0.2.12",
"ui-router-extras": "~0.0.13",
"angular-bootstrap": "~0.13.0",
"ngInfiniteScroll": "~1.2.0"
}
}

将bower.json文件放入项目的根目录中，在项目根目录中运行

bower install

就可以直接将项目所需要的前端库，直接下载下来。

bower解决了前端库及其依赖安装的问题。至于怎么把真正所需要的文件引入到html文件中，就需要wiredep来帮忙啦。

详情参考 wiredep项目主页

html文件(index.html)

<html>
<head>
<!-- bower:css -->
<!-- endbower -->
</head>
<body>
<!-- bower:js -->
<!-- endbower -->
</body>
</html>

gulp.js

var wiredep = require('wiredep').stream;

gulp.task('bower', function () {
gulp.src('./index.html')
.pipe(wiredep({
optional: 'configuration',
goes: 'here'
}))
.pipe(gulp.dest('./'));
});

在命令行运行

gulp bower

就可以将所需库的js、css文件直接引入到html文件中。

bower解决了前端库依赖管理的痛点，而wiredep解决了bower前端库引入进html的问题。

参考： bower官网、 wiredep项目主页

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航