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

样式.styl

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