Question

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

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

我正在使用Less css模板。

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

例如

image.png转换为image-455454545.png
css参考background-image：url（image.png） - ＆gt;应该更改为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!
}

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

1 个答案: