如何为gulp-concat-css的输入文件设置合适的基

Question

我使用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指向错误的文件路径。例如，bootstrap.min.css的原始URL为url('../fonts/glyphicons-halflings-regular.woff')。现在合并的CSS自带url(../../fonts/glyphicons-halflings-regular.woff)的URL，这是错误的。应该是url(../libs/bootstrap/dist/fonts/glyphicons-halflings-regular.woff)

根据gulp-concat-css文档，它说"为了正确的导入内联和url重基，请确保您为输入文件设置了正确的基"。

如何为输入文件设置正确的base以获得正确的url rebase?

Answer 1

您必须在gulp中设置base as选项。{ 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'));
});