在生产模式下使用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”),这非常棒:-)。
诀窍是,在模板中,只有script
和link
元素的占位符,并且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_js
和cachify_css
)。
看起来它不像Piler那样function丰富,但可能更简单一些,并且应该满足问题中提到的所有要求。