gulp concat JS libraries CSS

Question

Я использую gulp concat для объединения всех файлов CSS JavaScript в один. Моя задача глотки выглядит примерно так:

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 к ложным, его истинное по умолчанию

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-адреса перебазироваться, убедитесь, что вы правильно установить базу для входных файлов.

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')); 
});