前端工具bower wiredep

港控/mmm° 2022-08-19 08:12 162阅读 0赞

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

详细信息请参考 [bower官网][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项目主页][wiredep]

html文件(index.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官网][bower] 、 [wiredep项目主页][wiredep]

[bower]: http://bower.io/
[wiredep]: https://github.com/taptapship/wiredep