Web前端自动化构建（四）—— Bower 依赖管理（Bower集成Gulp的两种方式）

全名：《Web前端自动化构建 Gulp、Bower和Yeoman开发指南》

作者：Stefan Banumgartner【奥】

译者：谈博文

Bower可以管理项目的依赖，因而我们可以不再使用本地下载好的vendor，因为这个文件夹可能存在老版本的组件。原完整gulpfile.js，请参照Web前端自动化构建（三）——用Gulp配置本地开发环境。

下面，我们将一个存在于‘./scripts/vendor’目录下的jquery，通过bower安装，并使用gulp把依赖和项目自动集成。

方法一:使用wiredep插件，用gulp把依赖集成到应用中

1. 删除vendor中的jquery，并使用bower安装： 2. 引入wiredep

wiredep插件会读取bower.json文件中的内容，获取到碧瑶以来的主文件的路径，然后注入到html文件中。

首先，删除index.html中的

<script src="scripts/vendor/jquery.js"></script>

,

同时在相同位置加入如下标记：

<!-- bower:js --> <!-- endbower -->

wiredep会在这两个注释之间引入bower文件路径。

3.修改gulpfile.js

添加新的deps task，如下：

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

...

gulp.task('deps', () => {
    return gulp.src('./app/index.html')
        .pipe(wiredep())
        .pipe(gulp.dest('dist'));
})
           

同时修改在default task中加入deps task，

gulp.task('default',
    gulp.series('clean',
        gulp.parallel('styles', 'scripts','deps'),
        'server',
       ...
    )
)
           

此时，运行

gulp

，会在dist文件夹下生成新的index.html文件，index.html中加入如下代码：

<!-- bower:js -->
<script src="../bower_components/jquery/dist/jquery.js"></script>
<!-- endbower -->
           

现在只需要简单的运行

bower update jquery

，就可以简单平滑的升级jQuery依赖，新的依赖也可以自动集成到项目里，不需要手动下载操作。

方法二：使用main-bower-files插件，把依赖集成到构建流程中

使用main-bower-files会返回一个由文件路径组成的数组。根据这些路径，我们可以把相应的依赖文件添加到构建pipe中。

然后声明一个glob变量，让它同时包含依赖和自己的代码，最终通过构建pipe，返回一个文件。

首先，安装

main-bower-files

：

然后，修改gulpfile.js的script task，

const mainBowerFiles = require('main-bower-files');     //引入模块
...

gulp.task('scripts',
    gulp.series('test', function scriptsInternal() {
        let glob = mainBowerFiles('**/*.js');         //声明glob变量       
        glob.push('./app/scripts/*.js');              //把自己的代码匹配规则添加到数组中
        return gulp.src(glob)                         //把数组传递给gulp.src()
            .pipe(concat('main.min.js'))
            .pipe(uglify())
            .pipe(gulp.dest('dist/scripts'));
    })
);
           

现在执行

gulp scripts

，就可以把所有安装的JavaScript组件也包括到

main.min.js

中去了。

未完待续。。。

下一章中，会根据现在的Bower和Gulp配置，让这个项目可以在更多新项目中复用。