8

ブラウザに送信されるすべてのjavascript、css、および画像を連結して縮小し、md5キャッシュバスティングファイル名を付けたいと思います。connect-assets などのパッケージでこれを達成できました。

ただし、md5 で処理された画像ファイル名を処理前に css に追加できませんでした。

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

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

例えば

image.png は image-455454545.png に変換されます
css 参照 background-image: url(image.png) -> image-455454545.png に変更する必要があります

4

1 に答える 1

7

私の知る限り、Less にはユーザー定義関数を利用する機能がありません。ただし、スタイラスはそうです。そのため、代わりの CSS プリプロセッサーに飛び乗っても構わないと思っているなら、とても楽しいものです! (Stylus は Less と非常によく似ており、切り替えるのにそれほど時間はかかりません。Plus はconnect-assets既に Stylus をサポートしているため、環境に簡単にプラグインできます。)

サーバー.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"
}

スタイル.スタイル

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

これは次のようにコンパイルされます:

スタイル.css

.image-block {
  background-image: url("versionedFilename.png"); //hooray!
}
于 2012-08-18T17:10:58.153 に答える