11

我有一个在节点中运行的网络应用程序。所有（客户端）Javascript/CSS 文件目前都没有被缩小以使其更易于调试。

当我开始生产时，我想缩小这些脚本。有类似的东西会很好：

node app.js -production

如何在不更改 html 文件中的脚本标签的情况下提供脚本的缩小版本？应该有类似的东西：如果我在生产中，请使用这两个缩小（组合）脚本，否则使用我所有未缩小的脚本..

这可能吗？也许我想得太复杂了？

4

5 回答 5

21

您可能对Piler感兴趣。它是一个 Node.js 模块，可在调试模式下像往常一样提供您指定的所有 JavaScript（和 CSS）文件，但在生产模式下会连接和缩小。

作为一项特殊功能，您可以通过 Socket.io 强制 CSS 更新实时显示在您的浏览器中（在 Piler 中称为“CSS Live Updated”），这非常棒:-)。

诀窍是在你的模板中只有scriptandlink元素的占位符，并且 Piler 在运行时渲染这些元素——在调试模式下作为单个元素，在生产模式下作为动态生成的单个元素。

通过这种方式，您可以忘记手动或使用构建工具创建资产的串联和缩小版本，它只是在运行时存在，但在开发和调试时您始终拥有分离的完整版本。

于 2013-02-12T20:47:17.993 回答
5

您可以为静态文件使用 2 个单独的位置

这是一些快速代码：

if (process.env.MODE === "production") {
  app.use(express['static'](__dirname + '/min'));
} else {
  app.use(express['static'](__dirname + '/normal'));
}

并开始节点

MODE=production node app.js

此外，如果您不想复制所有文件，您可以利用 express static router 在第一个文件处停止的事实，并执行以下操作：

if (process.env.MODE === "production") {
  app.use(express['static'](__dirname + '/min'));  // if minized version exists, serves it
}
app.use(express['static'](__dirname + '/normal'));  // fallback to regular files

但是，是否最小化使用相同的名称会导致浏览器缓存出现问题。

于 2013-02-12T20:47:17.503 回答
1

我想与你们分享我的最终解决方案。

我使用 JSHTML 进行 Express（在此处输入链接描述）

在我的主节点文件中，我使用了一个特殊的路由：

app.get('/**:type(html)', function (req, res, next) {
var renderingUrl = req.url.substring(1, req.url.lastIndexOf("."));
//TODO: Find a better solution
    try{
        var assetUrl = req.url.substring(req.url.lastIndexOf("/") + 1, req.url.lastIndexOf("."));
        var assets = config.getResourceBundle(assetUrl);
        assets.production = config.getEnviroment() === "production";
        res.locals(assets);
        res.render(renderingUrl);
    }catch(e){
        res.redirect("/");
    }
});

如您所见，我从 config.getResourceBundle 获取我的资产。这是一个简单的函数：

exports.getResourceBundle = function(identifier){
    switch(enviroment){
        case "development":
            return devConfig.getResourceBundle(identifier);
        case "production":
            return prodConfig.getResourceBundle(identifier);
        default:
            return devConfig.getResourceBundle(identifier);
    }
}

最后是资产文件集合的示例：

exports.getResourceBundle = function (identifier) {
    return resourceBundle[identifier];
};


resourceBundle = {
    index:{
        cssFiles:[
            "resources/dev/css/login.css",
            "resources/dev/css/logonDlg.css",
            "resources/dev/css/footer.css"
        ],
        jsFiles:[
            "resources/dev/js/lib/jquery/jquery.183.js",
            "resources/dev/js/utilities.js",
            "resources/dev/js/lib/crypto.3.1.2.js"
        ]
    },
    register:{
        cssFiles:[
            "resources/dev/css/login.css",
            "resources/dev/css/modalDialog.css",
            "resources/dev/css/footer.css"
        ],
        jsFiles:[
            "resources/dev/js/lib/jquery/jquery.183.js",
            "resources/dev/js/utilities.js",
            "resources/dev/js/lib/crypto.3.1.2.js",
            "resources/dev/js/lib/jquery.simplemodal.js",
            "resources/dev/js/xfiles.register.js"
        ]
    }
(...)

我有 2 个文件夹。开发/产品。grunt 会将缩小后的文件复制到 prod/.. 并从 dev/.. 中删除文件。如果 NODE_ENV 变量设置为生产，我将发送我的脚本/css 的缩小版本。我认为这是目前最优雅的解决方案。

于 2013-06-17T06:29:52.187 回答
1

有适合您的构建工具插件，可以帮助您优雅地解决这个问题：

对于 Gulp： https ://www.npmjs.org/package/gulp-useref/

对于咕噜声： https ://github.com/pajtai/grunt-useref

于 2014-03-01T16:08:35.133 回答
0

另一个可能相关的 Node.js 模块是connect-cachify。

它似乎并没有为您做实际的缩小，但它确实让您在生产中提供缩小版本，或在开发中提供所有原始脚本，而无需更改模板（感谢cachify_js和cachify_css）。

似乎它不像 Piler 那样功能丰富，但可能更简单一些，并且应该满足问题中提到的所有要求。

于 2015-06-18T15:48:50.877 回答