Node.js, Express i css, js, zasoby obrazu

Question

Chciałbym mieć wszystkie javascript, css i obrazy, które są wysyłane do przeglądarki, aby zostać połączone, zminimalizowane i mieć nazwę pliku pomijania pamięci podręcznej md5. Osiągnąłem to dzięki pakietom takim jak connect-assets i innym.

Jednak nie udało mi się dodać nazwy pliku md5'ed do pliku css przed przetworzeniem.

Używam mniej szablonów css.

Wszelkie wskazówki do pakietów, które mogłyby mi pomóc, byłyby świetne.

np

image.png jest przekształcany do obrazu 455454545.png
referencje CSS background-image: url (image.png) -> należy zmienić obrazu 455454545.png

Answer 1

Jak daleko jak wiem, Less nie ma możliwości korzystania z funkcji zdefiniowanych przez użytkownika. Jednak Stylus to robi. Więc jeśli chcesz wskoczyć na alternatywny preprocesor CSS, możesz mieć świetną zabawę! (Stylus jest naprawdę bardzo simliar do mniej i nie powinno to zająć dużo, aby przełączyć się do niego. Plus connect-assets już obsługuje rysik, więc należy go podłączyć do swojego środowiska łatwo.)

server.js

var fs = require('fs'); 
var stylus = require('stylus'); 

stylus(fs.readFileSync("styles.styl", 'utf8')) //load stylus file 
    .define("versionedFile", versionedFile) //add our custom function to the stylus env 
    .render(function(err, css){ //render! 
    if (err) { 
     throw err; 
    } 

    fs.writeFileSync("styles.css", css); //write the compiled css to a .css file 
}); 

//our custom function 
function versionedFile(filename) { 
    ... lookup versioned file of filename ... 
    return "versionedFilename.png" 
} 

styles.styl

.image-block { 
    background-image: url(versionedFile('unversionedFilename.png')); //this is how we use our custom function 
} 

Która zostanie skompilowany do:

styles.css

.image-block { 
    background-image: url("versionedFilename.png"); //hooray! 
}