gulp-clean-css не может установить правильный относительный путь для url() для ресурсов, таких как шрифты и изображения

Question

Я использую NPM и Gulp для моего менеджера пакетов и системы сборки. Я установил "gulp-sass" для поддержки sass и "gulp-clean-css", чтобы я мог встроить @import css файлы. Я записываю свои файлы SCSS в "_frontend/scss/**/*" и собираю их в один файл как "assets / frontend / css / styles.css". В выходной папке у меня есть другие важные папки ресурсов, которые являются родственными элементами "css": "шрифты", "img" и "js".

Моя проблема в том, что я не могу получить относительные пути url() для правильной цели при импорте файла "*.css". Тем не менее, это нормально, когда я импортирую ".scss" файлы.

Вот мой код (для упрощения вопроса я взял исходные карты, журнал ошибок и т. Д.):

GULPFILE.JS

gulp.task('styles', function() {
    gulp.src(styles.src)
        .pipe(sassGlob())                                   // Support for bundle requires for Sass
        .pipe(cleanCSS({
            // relativeTo: './node_modules',    <-- I tried with different variations here, no luck
            // root: './node_modules',          <-- I tried with different variations here, no luck
            processImport: true
        }))
        .pipe(rename('styles.css'))                      // Name output CSS file
        .pipe(gulp.dest('../assets/frontend/css/'));
});

MAIN.SCSS

Следующее в порядке

@import "font-awesome/scss/font-awesome.scss";

Вывод, кажется, с правильными относительными путями Пример вывода: url(../fonts/FontAwesome/fontawesome-webfont.eot? V =4.6.1)

Следующее НЕ

@import '../node_modules/jquery-ui/themes/base/jquery-ui.css';

Пример вывода: url(../node_modules/jquery-ui/themes/base/images/animated-overlay.gif) ^^ Вышеприведенное как-то добавляет "../node_modules".Я хочу, чтобы это как-то было установлено на "../img/vendor/jquery-ui/what/ever/i/like/here"

Вот моя структура каталогов.

_frontend    
 ├─fonts
 │  ├─Beamstyle-Icons
 │  └─Gotham-Light-Regular
 ├─node_modules
 │  ├─jquery-ui
 │  │  ├─scripts
 │  │  └─themes
 │  │      ├─base
 │  │         ├─images
 │  │         └─minified
 │  │             └─images
 │  └─ (other stuff...)
 │
 ├─scripts
 │  ├─app
 │  └─vendor
 └─scss
     ├─config
     ├─helpers
     │  ├─classes
     │  ├─functions
     │  ├─mixins
     │  └─placeholders
     └─src
         ├─blocks
         └─components
assets
 └─frontend
    ├─css
    ├─fonts
    ├─img
    │  ├─Beamstyle-Icons
    │  ├─FontAwesome
    │  └─Gotham-Light-Regular
    └─js

Было бы здорово, если кто-нибудь может помочь в этом.

Answer 1

Для версии < 2.4

использование relativeTo, root а также target и если вы не хотите перебазировать, вы можете использовать rebase: false Варианты конфигурации.

Для версии> = 2.4

gulp-clean-css был обновлён для использования clean-css 4.x, поэтому ни один из приведенных выше вариантов не работает, и они только предоставляют rebaseTo вариант, который будет перебазировать все ваши пути.

Answer 2

Я заставил это работать, используя относительный.

Док говорит: ( https://www.npmjs.com/package/clean-css)

lativeTo - путь для разрешения относительных правил @import и URL-адресов.

Это означает, что относительный путь назначения + должен вести от gulpfile.js к относительному каталогу, указанному css-ресурсами (шрифтами, изображениями).

Пример:

\---project
    +---assets
    |   \---stylesheets
    |       |   style.css
    |       |   
    |       \---dist
    |               style.min.css
    | 
    |   \---fonts   
    |               my-font.ttf           
    \---gulp
            gulpfile.js

Целевой путь установлен (из gulpfile) в '../assets/stylesheets/dist'

Моя задача:

// Create minified css
gulp.task('minifycss', function() {
    return gulp
        .src('../assets/stylesheets/*.css')
        .pipe(cleancss({relativeTo: '../assets/', compatibility: 'ie8'}))
        .pipe(rename({
            suffix: ".min"                              // add *.min suffix
        }))
        .pipe(gulp.dest('../assets/stylesheets/dist'))
});

выход:

// style.css :
     src: url("../fonts/my-font.ttf");

// dist/style.min.css :
     src: url("../../fonts/my-font.ttf");