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

我有一个在节点中运行的Web应用程序。 所有的(客户端)Javascript / CSS文件目前还没有被缩小,以便于debugging。

当我正在投入生产时,我想简化这些脚本。 有这样的事情会很高兴:

node app.js -production

如何在不改变HTML文件中的脚本标记的情况下为我的脚本提供缩小版本? 应该是这样的:如果我在生产中,使用这2个缩小(组合)的脚本,否则使用我所有的未经脚本化的脚本。

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

你可能对Piler感兴趣。 这是一个Node.js模块,它在debugging模式下像往常一样提供所有的JavaScript(和CSS)文件,但在生产模式下连接并缩小。

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

诀窍是,在模板中,只有scriptlink元素的占位符,并且Piler在运行时呈现这些元素 – 在debugging模式下作为单个元素,在生产模式下作为dynamic生成的单个元素。

通过这种方式,您可以忘记手动或使用构build工具创build资源的连接和缩小版本,它只是在运行时出现,但在开发和debugging时始终有分离的完整版本。

你可以为你的静态文件使用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 

尽pipe使用相同的名字来最小化或者不会导致浏览器caching的问题。

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

我使用JSHTML for Express( 在此处input链接描述 )

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

 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获取我的资产。 这是一个简单的function:

 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_ENVvariables设置为生产,我将发运我的脚本/ css的缩小版本。 我认为这是目前最优雅的解决scheme。

有为您build立的工具插件,可以帮助您优雅地解决这个问题:

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

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

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

它似乎没有为你做实际的缩小,但是它可以让你在生产中缩小版本或开发中的所有原始脚本,而不用改变模板(感谢cachify_jscachify_css )。

看起来它不像Piler那样function丰富,但可能更简单一些,并且应该满足问题中提到的所有要求。