Node.js,Express和css,js,图像资产

Question

我希望将发送到浏览器的所有javascript,css和图像连接起来,缩小并具有md5缓存清除文件名.我已经能够通过connect-assets等软件包实现这一目标.

但是,在处理之前,我无法将md5'ed图像文件名添加到css中.

我正在使用Less css模板.

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

例如

image.png转换为image-455454545.png
css参考background-image:url(image.png) - >应该更改为image-455454545.png

Answer 1

据我所知,Less没有能力利用用户定义的功能.然而,手写笔确实如此.所以如果你愿意跳上另一个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!
}