使用node.js在生产模式中缩小脚本/ CSS

Question

我有一个在节点中运行的Web应用程序。 所有（客户端）Javascript / CSS文件目前都没有缩小，以便于调试。

当我投入生产时，我想缩小这些脚本。 有这样的东西会很高兴：

node app.js -production

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

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

Answer 1

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

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

技巧是在模板中只有script和link元素的占位符，Piler在运行时呈现这些元素 - 在调试模式下作为单个元素，在生产模式下作为动态生成的单个元素。

这样您就可以忘记手动创建资产的连接和缩小版本，或者使用构建工具，它只是在运行时，但在开发和调试时总是有完整的分离版本。

Answer 2

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

这是一些明确的代码：

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

并启动节点

MODE=production node app.js

此外，如果您不想复制所有文件，您可以利用快速静态路由器在第一个文件停止的事实，并执行以下操作：

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

但是，使用相同的名称进行最小化或不使用会导致浏览器缓存问题。

Answer 3

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

我使用JSHTML for 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个文件夹。 dev / prod。 grunt会将缩小的文件复制到prod / ..并从dev /中删除文件。如果NODE_ENV变量设置为production，我将发送我的scripts / css的缩小版本。 我认为这是目前最优雅的解决方案。

Answer 4

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

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

对于Grunt： https ： //github.com/pajtai/grunt-useref

Answer 5

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

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

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