नोड.जेएस, एक्सप्रेस और सीएसएस, जेएस, छवि संपत्ति

Question

मैं सभी जावास्क्रिप्ट, सीएसएस और छवियों को ब्राउज़र में भेजना चाहता हूं जो संक्षिप्त, संक्षिप्त और एमडी 5 कैश बस्टिंग फ़ाइल नाम हैं। मैं इसे कनेक्ट-एसेट्स और अन्य जैसे पैकेजों के साथ प्राप्त करने में सक्षम हूं।

हालांकि मैं संसाधित होने से पहले md5'ed छवि फ़ाइल नाम को सीएसएस में जोड़ने में सक्षम नहीं हूं।

मैं कम सीएसएस टेम्पलेट्स का उपयोग कर रहा हूं।

पैकेज में कोई भी पॉइंटर्स जो मेरी मदद कर सकता है वह बहुत अच्छा होगा।

जैसे

image.png करने के लिए छवि-455454545.png
सीएसएस संदर्भ पृष्ठभूमि छवि बदल जाती है: यूआरएल (image.png) -> में बदल जानी चाहिए छवि 455454545.png

Answer 1

जहां तक जैसा कि मुझे पता है, कम उपयोगकर्ता के परिभाषित कार्यों का उपयोग करने की क्षमता नहीं है। स्टाइलस, हालांकि, करता है। तो यदि आप एक वैकल्पिक सीएसएस प्रीप्रोसेसर पर कूदने के इच्छुक हैं, तो वहां बहुत मजेदार होना है! (स्टाइलस वास्तव में कम करने के लिए बहुत simliar है, और यह बहुत इसे करने के लिए स्विच करने के लिए नहीं लेना चाहिए। इसके अलावा connect-assets पहले से ही, स्टाइलस का समर्थन करता है, तो यह अपने वातावरण में आसानी से प्लग चाहिए।)

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 
} 

कौन सा में संकलित होगा:

styles.css इस के लिए

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