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

Question

我想要有所有的javascript，css和图像，被发送到浏览器，以连接，缩小，并有一个md5缓存破坏文件名。我已经能够使用诸如connect-assets和其他包来实现这一点。

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

我使用的css模板更少了。

任何对我有帮助的软件包的指点都会很棒。

例如

image.png被转换为图像-455454545.png

css references -image: url(image.png) ->应该更改为image-455454545.png

Answer 1

据我所知，Less不具备利用用户定义函数的能力。然而，手写笔却可以。因此，如果您愿意使用另一个CSS预处理器，那么将会有很大的乐趣！(手写笔真的非常类似于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!
}