gulp concat JS libraries CSS

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 options 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重基，请确保为输入文件设置了正确的基。

Answer 2

您必须在gulp中添加base选项。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'));
});