Node.js、Expressとcss、js、画像アセット

Question

ブラウザに送信され、連結され、縮小され、md5キャッシュ破損ファイル名を持つすべてのjavascript、cssおよび画像を持っていたいと思います。私はconnect-assetsなどのパッケージでこれを達成できました。

しかし、処理前にmd5'edイメージファイル名をCSSに追加できませんでした。

私はLess CSSテンプレートを使用しています。

私を助けることができるパッケージへの指針は素晴らしいでしょう。

例えば

image.pngは、画像455454545.png
CSSリファレンス背景画像に変換されます。URL（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! 
}