Question

我正在使用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文件位置自动更改路径？

Answer 1

您需要将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

<强> NB：要正确导入内联和url rebase，请确保为输入文件设置正确的基础。

Answer 2

您必须将基本选项添加到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'));
});

gulp concat JS库CSS

2 个答案: