gulp-clean-css kann nicht den richtigen relativen Pfad für URL() für Assets wie Schriftarten und Bilder setzen

Question

Ich benutze NPM und Gulp für meine Paket-Manager und Build-System. Ich habe "gulp-sass" installiert, um sass zu unterstützen, und "gulp-clean-css", damit ich Dateien inline @importieren kann. Ich nehme meine SCSS-Dateien in "_frontend/scss/**/*" und kompiliere diese in eine einzelne Datei als "assets/frontend/css/styles.css". Am Ausgabestandort habe ich andere wichtige Ressourcenordner, die Geschwister von "css" sind: "Fonts", "img" und "js".

Mein Problem ist, dass ich die relativen URLs() Pfade nicht richtig erreichen kann, wenn ich eine "* .css" Datei importiere. Es ist jedoch in Ordnung, wenn ich ".scss" -Dateien importiere.

Hier ist mein Code (I sourcemaps nahm, Fehler usw. melden Sie sich die Frage zu vereinfachen):

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

Folgendes ist OK

Ausgang scheint mit den richtigen relativen Pfaden Beispiel für eine Ausgabe zu kommen: url (? ../ fonts/FontAwesome/fontawesome-webfont.eot v = 4.6.1)

Hier finden Sie NICHT

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

Beispielausgabe: url (../ node_modules/jquery-ui/themes/base/images/animiertes-overlay.gif) ^^ Die oben irgendwie hängt die "../node_modules" . Ich will es das irgendwie auf

Hier Struktur mein Verzeichnis „../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 

Wäre toll, wenn jemand dazu beitragen kann.

Answer 1

Ich habe es mit relativ zu arbeiten lassen.

Doc sagt: (https://www.npmjs.com/package/clean-css)

relativeTo - Pfad zu resolve relativ @import Regeln und URLs

Es bedeutet, dass relativeTo + Zielpfad Muss führen von gulpfile.js zum relativen Verzeichnis, auf das css assets (fonts, images) zeigen.

Beispiel:

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

Zielpfad festgelegt ist (von gulpfile) zu '../assets/stylesheets/dist'

Meine Aufgabe ist:

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

output:

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

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

Answer 2

Für Version < 2,4

Verwendung relativeTo, root und target und wenn Sie Sie rebase: false Konfigurationsoptionen können nicht auf rebase wollen.

Für Version> = 2.4

schluck-clean-css wurde modernisiert clean-CSS 4.x zu verwenden, so dass keine der oben genannten Optionen Arbeit und sie bieten nur rebaseTo Option, die alle Ihre rebase wird Pfade.