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

       

网上收集的解决方案 "Node.js,Express和css,js,图片资源"

据我所知,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! }