node.js - Node.js、Express 和 css、js、图像资产

Question

我希望将发送到浏览器的所有 javascript、css 和图像连接起来、缩小并具有 md5 缓存破坏文件名。我已经能够使用 connect-assets 等软件包来实现这一点。

但是，我无法在处理之前将 md5 的图像文件名添加到 css 中。

我正在使用较少的 css 模板。

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

例如

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

Answer 1

据我所知，Less 不具备使用用户定义函数的能力。但是，手写笔可以。因此，如果您愿意跳到备用 CSS 预处理器上，那么会很有趣！（Stylus 与 Less 非常相似，切换到它应该不会花太多时间。Plusconnect-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"
}

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