Node.js、Express 和 css、js、图像资产答案

【问题标题】：Node.js, Express and css, js, image assetsNode.js、Express 和 css、js、图像资产
【发布时间】：2012-08-19 01:32:31
【问题描述】：

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

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

我正在使用 Less css 模板。

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

例如

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

【问题讨论】：

标签： node.js express

【解决方案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!
}

【讨论】：

谢谢。 “...查找文件名的版本化文件...”位如何工作？抱歉，我是 node 新手，所以不确定是否有简单的方法。
这实际上取决于您如何对文件进行指纹识别/版本控制。例如，如果您使用的指纹识别方法创建了一个清单文件（类似于 Ruby 中的 Sprockets），那么您可以在那里查找版本化文件名。我相信连接资产通过connect-file-cache 将其“清单”存储在内存中。
看起来有一个项目可以为您做到这一点github.com/lucasmazza/fingerprint