Jak przepisać adresy URL plików CSS dostawców za pomocą Grunta

Question

Próbuję przenieść zależności między frontendami z systemu kontroli wersji. Połączenie Bower.io i Grunt powinno być w stanie to zrobić.

Występuje jednak problem, którego nie mogę jeszcze rozwiązać, łącząc wiele bibliotek dostawców. Na przykład założyć, mam następującą strukturę katalogów, gdzie elementy katalog jest katalogiem, który Bower.io zapisuje zależności w:

├── assets 
└── components 
    ├── bootstrap 
    │   ├── img 
    │   │   └── glyhs.gif 
    │   └── less 
    │    └── bootstrap.css 
    └── jquery-ui 
     ├── css 
     │   └── style.css 
     └── images 
      ├── next.gif 
      └── prev.gif 

Załóżmy teraz chcę pakiet zarówno jQuery style.css i Bootstrap” bootstrap.css. Zapiszę ten plik w pakiecie w assets/bundled.css.

Jednak w tym pliku odniesienia do oryginalnych obrazów (../images/next.gif i ../img/glyhs.gif) są nieprawidłowe. Będą musiały zostać przepisane, aby działały (więc ../images/next.gif => ../components/jquery-ui/images/next.gif). Wierzę, że (d) to przepisywanie adresów URL jest czymś, co Grunt powinien być w stanie zrobić. Ale nie wydaje mi się, aby to działało przy użyciu zadań cssmin/less/copy. Na przykład następujące ustawienia Grunt (tylko w ruchu 1 plik) nie działa:

module.exports = function (grunt) { 
    grunt.initConfig({ 
     pkg: grunt.file.readJSON('package.json'), 
     less: { 
      options: { 
       compile: false, 
       relativeUrls: true 
      }, 
      bootstrap: { 
       src: 'components/bootstrap/less/bootstrap.less', 
       dest: 'assets/bootstrap.css' 
      } 
     } 
    }); 
    grunt.loadNpmTasks('grunt-contrib-less'); 
    grunt.registerTask('dist-css', ['less']); 
}; 

Albo:

• Czy ja źle skonfigurowane Grunt lub zrobić coś złego?

• A może przepływ pracy, który opisuję, nie jest właściwy i powinienem zamiast tego użyć innego.

Dzięki!

Answer 1

Dla odniesienia: istnieje teraz rozwiązanie łatwo dostępne. Wysłałem ten sam problem do wtyczki CleanCss grunt, a oni zaakceptowali to i opublikowali to zachowanie w swojej nowej wersji 1.1.

Można znaleźć problem na trackerze GitHub tutaj: https://github.com/GoalSmashers/clean-css/issues/129

Biblioteka ta umożliwia użyć absolutnej przepisanie (z katalogu) lub zmiany ścieżki względne obrazu w oparciu o nowym katalogu wyjściowego. Poszukaj dyrektyw --root lub --ouput.

Dzięki za porady i odpowiedzi dla ludzi!

Answer 2

Będziesz chciał wykonać wyszukiwanie/zamiana w pliku dist css, aby wygenerować poprawne ścieżki względne. Istnieje wiele wtyczek, które mogą to dla ciebie zrobić, osobiście wolę grunt-replace. Skonfigurować Aktywa skompresowane ze zmiennymi a następnie produkować css dist z adresów URL generowanych dynamicznie .. Więc:

body { 
    background:url(@@IMG_PATH/background.jpg); 
} 

Staje się to w dist:

body { 
    background:url(path/to/background.jpg); 
} 

nadzieję, że to pomaga.

Answer 3

Prawdopodobnie chcesz obejrzeć ten pakiet pomrukowy https://github.com/Ideame/grunt-css-urls. Ten pakiet wydaje się być przeznaczony do rozwiązania dokładnie Twojego problemu.

Edytuj: po obejrzeniu tej wtyczki, nie podobał mi się pomysł przepisywania mojego znacznika, aby mój proces kompilacji stał się bardziej płynny. Więc skończyło się na napisaniu mojej własnej, drobnej funkcji, która przerabia dla mnie.

Używam wtyczki concat gruntu do łączenia moich plików css. Zaletą tej wtyczki jest to, że obsługuje funkcję przetwarzania plików przed konkatenacją.Teraz mój plik gruntów wygląda następująco:

grunt.initConfig({ 
concat: { 
    options: { 
    separator: '\n', 
    process: function (src, filepath) { 
     var cssPatt = new RegExp('app(\/.*\/).*\.css$'); 

     //filter out everithing except css files 
     var file = cssPatt.exec(filepath); 

     if (file) { 
      var urlPatt = /url\(\'(.*)\'\)/g; 

     console.log('In file: ' + filepath); 

     //replace every url(...) with its absolute path 
     return src.replace(urlPatt, function (match, p1) { 
      console.log(' * ' + match + ' -> ' + 'url(\'' + file[1] + p1 + '\')'); 
      return 'url(\'' + file[1] + p1 + '\')'; 
     }); 
     } 

     return src; 
    } 
    }, 
}