前端工具bower wiredep

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值