0

我正在使用 gulp concat 将所有 JavaScript 库 CSS 文件合并为一个。我的 gulp 任务看起来像这样：

gulp.task('concatcss', function() {
  return gulp.src('assets/libs/**/*.css')
    .pipe(concatCss("all.css").on('error', standardHandler))
    .pipe(minifyCss().on('error', standardHandler))
    .pipe(gulp.dest('dist'));
});

将所有 CSS 合二为一确实有效。但是，问题是随着路径的更改，任何 CSS 链接文件url("../fonts/glyphicons-halflings-regular.woff")都将无法加载。

我该如何克服这个问题？无论如何它可以根据新的输出 CSS 文件位置自动更改路径吗？

4

2 回答 2

2

您需要将 concatcss 选项设置rebaseUrls为 false，默认为 true

rebaseUrls: (default true) Adjust any relative URL to the location of the target file.

例子：

concatCss(targetFile, {rebaseUrls:false})

在您自己的情况下：

gulp.task('concatcss', function() {
  return gulp.src('assets/libs/**/*.css')
    .pipe(concatCss("all.css", {rebaseUrls:false}).on('error', standardHandler))
    .pipe(minifyCss().on('error', standardHandler))
    .pipe(gulp.dest('dist'));
});

其他选项（自 2.1.0 起）

inlineImports: (default true) Inline any local import statement found
rebaseUrls: (default true) Adjust any relative URL to the location of the target file.
includePaths: (default []) Include additional paths when inlining imports

注意： 对于正确的导入内联和 url rebase，请确保为输入文件设置正确的基础。

于 2015-08-12T10:00:20.667 回答
1

您必须像这样将 base 选项添加到 gulp.src：{ base: 'dist' }

您的代码重做：

gulp.task('concatcss', function() {
  return gulp.src('assets/libs/**/*.css', { base: 'dist'})
    .pipe(concatCss("all.css").on('error', standardHandler))
    .pipe(minifyCss().on('error', standardHandler))
    .pipe(gulp.dest('dist'));
});
于 2016-02-11T10:34:01.543 回答