Node.js，Express和css，js，圖像資產

Question

我想要將發送到瀏覽器的所有javascript，css和圖像連接，縮小並具有md5緩存清除文件名。我已經能夠通過連接資產和其他軟件包來實現這一點。

但是在處理之前，我還沒有能夠將md5格式的圖像文件名添加到css中。

我使用較少的CSS模板。

任何指向可以幫助我的軟件包的指針都會很棒。

例如

image.png被轉換爲圖像455454545.png
CSS引用背景圖像：網址（image.png） - >應該改變到圖像455454545.png

Answer 1

就據我所知，Less不具備利用用戶定義功能的能力。然而，手寫筆確實如此。所以如果你願意跳上一個備用的CSS預處理器，那麼有很大的樂趣！ （手寫筆真的是很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! 
}