Node.js，Express和css，js，图片资源

我想所有的JavaScript，CSS和图像发送到浏览器被连接，缩小，并有一个MD5caching破坏文件名。 我已经能够实现这个包，如连接资产和其他人。

然而，我还没有能够在处理之前将md5的图像文件名添加到css中。

我正在使用较less的CSS模板。

任何可以帮助我的包的指针都会很棒。

例如

image.png被转换成图像455454545.png
css参考background-image：url（image.png） – >应该改成image-455454545.png

Answer 1

据我所知，Less不具备利用用户自定义function的能力。 铁笔，但是，确实。 所以，如果你愿意跳上一个替代的CSS预处理器，那么有很大的乐趣！ （Stylus真的非常类似于Less，它不应该花太多时间去切换，另外connect-assets已经支持Stylus，所以它应该很容易地插入到你的环境中。）

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! }