如何使用gulp连接包含资产的bower_components？

Question

我正在开发一个示例应用程序,它使用bower进行依赖关系管理,并为它的构建系统吞咽.

我已经使用main-bower-files插件将目录中的所有相关文件复制bower_components到一个build/dist/bower_components目录中.

这一切都很完美,我可以打开我的应用程序index.html,它正确指向每个文件,并正确指向资产.

我的下一步是连接,bower_components以便我有一个CSS和一个JS文件以及所有资产(字体,图像等).我已经使用gulp-useref来捆绑所有组件,它似乎很好用.

但是,组合的一些CSS和JS文件使用相对路径来引用现在不正确的资产,因为所有内容都在一个文件中:

• FontAwesome
• 引导
• 以及我们正在创建的自定义凉亭组件

是否有固定资产的标准解决方案？

我是否需要使用gulp来更新资产引用或者使用不同的插件？

Answer 1

使用gulp -replace插件我们可以连接bower_components assests.

例如:

var replace = require('gulp-replace');

gulp.task('fix-paths', ['minify'], function() {
    gulp.src('public/css/site.css')
        .pipe(replace('../', '../bower_components/bootstrap/dist/'))
        .pipe(gulp.dest('public/css'));
});