Node.js, Express y css, js, activos de imagen

Question

Me gustaría que todos los javascript, css e imágenes que se envían al navegador se concatenen, se minimicen y tengan un nombre de archivo de memoria caché md5. Pude lograr esto con paquetes como connect-assets y otros.

Sin embargo, no he podido agregar el nombre de archivo md5'ed en el css antes de que se procese.

Estoy usando menos plantillas css.

Cualquier información sobre paquetes que podrían ayudarme sería genial.

por ejemplo

image.png se convierte en imagen 455454545.png
referencias css Imagen de fondo: url (image.png) -> debería cambiar a la imagen-455454545.png

Answer 1

Por lo como sé, Less no tiene la capacidad de utilizar funciones definidas por el usuario. Stylus, sin embargo, lo hace. Entonces, si estás dispuesto a saltar a un preprocesador de CSS alternativo, ¡entonces es muy divertido tenerlo! (Stylus es realmente muy simliar al menos, y no debe tomar mucho para cambiar a ella. connect-assets Plus ya es compatible con Stylus, por lo que debe conectar a su entorno con facilidad.)

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 
} 

Qué va a compilar en:

styles.css

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