解决Gulp构建的AngularJS项目中的footable依赖不能自动注入的问题

项目是基于Angular 1.5,构建工具为Gulp。项目文件结构来源于某前端模板的种子项目,与多数AngularJS 的Gulp版本的种子项目大同小异。Gulp的inject任务中已经有了将项目所依赖包的js、css文件自动添加到index.html中的脚本。

现在某页面需要用到footable,于是添加footable依赖:
bower install –save footable

安装后检查,看起来插件已经存在于项目的bower_components目录下了,并且项目的bower.json文件中,也已经自动添加了对footable的依赖,当前版本是3.1.4。

但是运行gulp serve 或者gulp build,均未能在index.html中看到footable的踪影。

小小了解了一下才知道原因:gulp的依赖注入,是调用了wiredep(项目地址:https://github.com/taptapship/wiredep)
而wiredep的工作原理,是根据项目的bower.json文件中所列的依赖,一一处理这些依赖项,处理的时候,会分析该依赖包本身的bower.json文件,根据该文件中的”main”的值来决定要将哪个文件添加到index.html中去。而footable的bower.json文件中,缺失了这一项。

根据wiredep的官方文档,只要在自己项目的bower.json文件中override就可以了。代码如下:

"overrides": {
  "footable": {
    "main": [
      "compiled/footable.js",
      "compiled/footable.bootstrap.css"
    ]
  }
}