Grunt

Question

kullanarak satıcı CSS dosyalarındaki görüntülerin URL'lerini yeniden yazma Ön uç bağımlılıklarını sürüm denetim sisteminden kaldırmaya çalışıyorum. Bower.io ve Grunt'ın bir kombinasyonu bunu yapabilmelidir. Ancak bir sorun, birden çok satıcı kitaplığı paketlemeyle çözemediğim halde ortaya çıkar.

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

Şimdi her iki jQuery'nin style.css ve Bootstrap' birleştirmek istiyorsanız varsayalım: bileşenleri dizin Bower.io içinde bağımlılıkları kaydeder dizin nerede Örneğin aşağıdaki dizin yapısına sahip varsayalım bootstrap.css. Bu paketlenmiş dosyayı varlıklar/bundled.css'a kaydedeceğim.

Ancak bu dosyada orijinal görüntülere yapılan başvurular (../images/next.gif ve ../img/glyhs.gif) yanlıştır. Çalışmak için yeniden yazılmalıdırlar (bu yüzden ../images/next.gif => ../components/jquery-ui/images/next.gif). İnanıyorum ki (d) bu URL'lerin yeniden yazılması Grunt'ın yapabilmesi gereken bir şeydir. Ancak bunu cssmin/less/copy görevleri kullanarak çalışmak için bulamıyorum. Örneğin (sadece 1 dosya hareketli) aşağıdaki Grunt kurulum çalışmaya başarısız:

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

Ya:

• Ben Grunt yanlış yapılandırmadığınızdan ya da yanlış bir şey mi yaptım? Ya da doğru olanı tarif etmediğim iş akışıdır ve bunun yerine bir tane kullanmalıyım.

Teşekkürler!

Answer 1

: hazır duruma bir çözüm yoktur. Aynı sorunu CleanCss grunt eklentisine gönderdim ve bunu kabul ettiler ve bu davranışı yeni 1.1 sürümünde yayınladılar.

Burada GitHub izleyicide konuyu bulabilirsiniz: https://github.com/GoalSmashers/clean-css/issues/129

Bu kütüphane sayesinde (bir kök dizinden) mutlak yeniden yazma kullanabilir veya yeni çıktı dizinde dayalı göreli görüntü yollarını değiştirmek ya yapar. --root veya --ouput yönergelerini arayın.

İpuçları ve cevaplar için teşekkürler!

Answer 2

Doğru göreceli yolları oluşturmak için dist css dosyanızda bazı arama/değiştirme yapmak isteyeceksiniz. Bunu sizin için yapabilecek çok sayıda gadget eklentisi var, kişisel olarak ben grunt-replace'u tercih ediyorum. değişkenlerle olmayan sıkıştırılmış öğeleri ayarlama ve daha sonra Yani .. dinamik olarak oluşturulmuş URL'ler ile bir dist css üretmek:

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

dist bu Oluyor: Bu yardımcı olur

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

Umut.

Answer 3

Muhtemelen bu aldatıcı pakete https://github.com/Ideame/grunt-css-urls bir göz atmak için wat. Bu paket tam olarak sorununuzu çözmeyi amaçlamaktadır.

Düzeltme: Bu eklentiye baktıktan sonra, oluşturma işlemimi daha sorunsuz hale getirmek için işaretlememi yeniden yazma fikrini beğenmedim. Bu yüzden benim için yeniden yazılan kendi küçük fonksiyonumu yazmayı bitirdim.

CSS dosyalarımı paketlemek için grunt'un concat eklentisini kullanıyorum. Bu eklenti hakkında iyi bir şey, birleştirme işleminden önce dosya işleme işlevini desteklemesidir.Şimdi benim gruntfile şöyle görünür: Sadece referans için

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; 
    } 
    }, 
}