A-A+

前端工具bower wiredep

2017年05月05日 javascript 暂无评论 阅读 17 views 次

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的问题。

打赏作者
如果文章对您有所帮助请打赏支持本站发展。

您的支持将鼓励我们继续创作!

[微信] 扫描二维码打赏

[支付宝] 扫描二维码打赏

标签:

给我留言

您必须 登录 才能发表留言!

Copyright © 大一网 保留所有权利.   Theme  Ality

用户登录 ⁄ 注册

分享到: