我正在开发一个使用的示例应用程序 亭子 因为它的依赖管理和 吞 因为它的构建系统。
我用过了 主亭子 - 文件 插件从中复制所有相关文件 bower_components 目录成一个 build/dist/bower_components 目录。
这一切都很完美，我可以打开我的应用程序 index.html 它正确地指向这些文件中的每一个并且它们正确地指向资产。
我的下一步是连接 bower_components 所以我有一个CSS和一个JS文件以及所有资产（字体，图像等）。我用过 一饮而尽，useref 捆绑所有组件，它似乎很好地工作。
但是，组合的一些CSS和JS文件使用相对路径来引用现在不正确的资产，因为所有内容都在一个文件中：
是否有固定资产的标准解决方案？
我是否需要使用gulp来更新资产引用或者使用不同的插件？
运用 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'));
});
我正在使用gulp inject插件将连接文件注入到html中。像这样的东西 -
gulp.task('html', ['styles', 'vendor-js', 'templateCache', 'scripts'], function() {
gulp.src('./*.html')
.pipe(inject(gulp.src(['./dist/js/**/*.js'])
.pipe(angularFilesort()), {
'ignorePath': 'dist/js',
'addRootSlash': false,
'addPrefix': 'scripts'
}))
.pipe(inject(gulp.src(['./dist/vendors/**/*.js', '!./dist/vendors/less/less.js'], {
read: false
}), {
'name': 'vendors',
'ignorePath': 'dist/vendors',
'addRootSlash': false,
'addPrefix': 'vendors'
}))
.pipe(inject(gulp.src(['./dist/css/*.css'], {
read: false
}), {
'ignorePath': 'dist/css',
'addRootSlash': false,
'addPrefix': 'styles'
}))
.pipe(gulp.dest('dist'));
});
如果您需要更多代码，请告诉我们。
对于 CSS，我建议使用 吞掉返工包装 重工 这有很多非常有用的插件。
其中之一是 网址，它提供了更新CSS中包含的URL的功能。
一个有用的例子是在CSS中没有要替换的路径;例如
URL（backgroundimage2.png）
或者，您希望根据类型（例如，仅图像，而不是Web字体）对URL进行不同的更改。
可以组成一个测试资产类型的函数;以下示例仅处理图像文件：
// CSS
.pipe(cssFilter)
.pipe(rework(reworkUrl(function (url) {
// modifications on url, e.g. using http://medialize.github.io/URI.js/
if (url.match(/[^/]+(jpg|jpeg|png|gif)$/))
{
return '/lib/img/' + url.replace('../', '');
}
else
{
return url;
}
})))
最近我发现了同样的问题，所以经历了各种解决方案，其中之一就是在这个答案中替换css的内容。在查看font-awesome.css后，很明显它指的是到达字体文件夹的相对路径。 bootstrap css的情况也是如此。解决方案很简单，现在始终确保将css和fonts文件夹保持在同一级别并复制数据。甚至包括您的应用程序特定的最小文件。所有dist文件的单一位置使生活变得轻松