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('../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文档，它说＆＃34;为了正确导入内联和url rebase，请确保为输入文件设置正确的基础＆＃34;。

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

Answer 1

你必须在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'));
});

如何为gulp-concat-css的输入文件设置正确的基础？

1 个答案: