如何使用gulp连接包含资产的bower_component?

前端之家收集整理的这篇文章主要介绍了如何使用gulp连接包含资产的bower_component?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在开发一个示例应用程序,它使用 bower作为它的依赖管理和 gulp它的构建系统.

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

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

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

然而,组合的一些CSS和JS文件使用相对路径来引用资源,这些资源现在是不正确的,因为一切都在一个文件中:

> FontAwesome
引导
>和我们创建的自定义保镖组件

有固定资产的标准解决方案吗?

我需要使用gulp来更新资源引用或者可能使用不同的插件

解决方法

使用 gulp-replace plugin我们可以连接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'));
});
原文链接:https://www.f2er.com/js/152918.html

猜你在找的JavaScript相关文章