3

我正在使用 gulp-concat-css 将选定的 CSS 列表合并为一个。我的项目文件夹结构如下所示：

[]Project Folder
gulpfile.js
---[]public
------[]assets
---------[]libs (All bower install libraries such as bootstrap will be placed here)
---------[]css (All my custom CSS including the combined CSS will be placed here)

现在，我的 gulp 任务看起来像这样：

gulp.task('concatcss', function() {
  return gulp.src(['public/assets/libs/bootstrap/dist/css/bootstrap.min.css',
    'public/assets/libs/angular-motion/dist/angular-motion.min.css',
    'public/assets/libs/bootstrap-additions/dist/bootstrap-additions.min.css',
    'public/assets/libs/blueimp-file-upload/css/jquery.fileupload.css',
    'public/assets/css/mycustom.css'])
    .pipe(concatCss("css/all.css").on('error', standardHandler))
    .pipe(minifyCss().on('error', standardHandler))
    .pipe(gulp.dest('public/assets'));
});

问题是最终输出带有错误的 url rebase。这会导致 CSS URL 指向错误的文件路径。例如，来自的原始 URLbootstrap.min.css是url('../fonts/glyphicons-halflings-regular.woff'). 现在，组合的 CSS 带有 的 URL url(../../fonts/glyphicons-halflings-regular.woff)，这是错误的。它应该是url(../libs/bootstrap/dist/fonts/glyphicons-halflings-regular.woff)

根据 gulp-concat-css 文档，它说“对于正确的导入内联和 url rebase，请确保为输入文件设置正确的基础”。

如何为输入文件设置正确的基础以获得正确的 url rebase？

4

1 回答 1

2

您必须在 gulp.src 中将 base 设置为选项，如下所示{ base: 'public/assets' }：

gulp.task('concatcss', function() {
  return gulp.src(['public/assets/libs/bootstrap/dist/css/bootstrap.min.css',
    'public/assets/libs/angular-motion/dist/angular-motion.min.css',
    'public/assets/libs/bootstrap-additions/dist/bootstrap-additions.min.css',
    'public/assets/libs/blueimp-file-upload/css/jquery.fileupload.css',
    'public/assets/css/mycustom.css'], { base: 'public/assets' })
    .pipe(concatCss("css/all.css").on('error', standardHandler))
    .pipe(minifyCss().on('error', standardHandler))
    .pipe(gulp.dest('public/assets'));
});
于 2016-02-11T10:30:40.093 回答