gulp - 如何使用 gulp 连接包含 Assets 的 bower_components？

Question

我正在开发一个使用 bower 的示例应用程序因为它的依赖管理和 gulp因为它的构建系统。

我用过 main-bower-files从 bower_components 复制所有相关文件的插件目录变成 build/dist/bower_components目录。

这一切都很完美，我可以打开我的应用程序的 index.html它正确地指向这些文件中的每一个，并且它们正确地指向 Assets 。

我的下一步是连接 bower_components这样我就有一个 CSS 和一个 JS 文件以及所有 Assets (字体、图像等)。我用过 gulp-useref捆绑所有组件，它似乎工作得很好。

然而，一些合并的 CSS 和 JS 文件使用相对路径来引用 Assets ，这些路径现在不正确，因为所有内容都在一个文件中:

FontAwesome

bootstrap

和我们正在创建的自定义 bower 组件

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

我需要使用 gulp 来更新 Assets 引用还是使用不同的插件？

Answer 1

使用 gulp-replace plugin我们可以连接 bower_components Assets 。
例如:

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'));
});