如何在 Google App Engine 上缩小和版本化 js/css？答案

【问题标题】：How to minify & version js/css on Google App Engine?如何在 Google App Engine 上缩小和版本化 js/css？
【发布时间】：2013-06-20 17:12:35
【问题描述】：

由于webassets won't work on GAE 可以即时压缩 js/css，看来最好的方法是在部署时进行。

经过大量谷歌搜索后，我想出了下面的脚本来实现这一点。

起初我认为最好的方法是将 base.html 中的 javascript 路径保持原样并简单地压缩 css/js。

cssmin 压缩 css 并覆盖原始文件。然而，闭包不允许覆盖原来的，这个概念已经失败了。

第二个问题是，即使我得到了覆盖原始文件的闭包，缓存也会成为问题。出于这个原因，每个缩小的 css/js 部署都应该在文件名中带有一个随机数，以便在新部署后实际选择新版本。以我提出的概念，这是不可能的。

因此，实现此目的的唯一方法是将base.html 修改为sed 或其他东西。

在我重新发明轮子之前，有没有更好的方法来做到这一点？非常感谢

import sys, os
import cssmin

def main():
    if len(sys.argv) == 1:
        return

    appId = sys.argv[1]
    print "appId", appId

    cmd = r'java -jar compiler.jar --js=/src/application/static/f11/f11.js --js_output_file=/src/application/static/f11/f11.min.js'
    os.system(cmd)

    output = cssmin.cssmin(open('/src/application/static/f11/f11.css').read())
    f = open('/src/application/static/f11/f11.css','w')
    f.write(output)    

    # Perform appcfg.py to update GAE server
    cmd = r'"\google_appengine\appcfg.py"'
    os.system(cmd + " update . " + " -A %s"%appId)


if __name__ == "__main__":
    main()

【问题讨论】：

是否有特定原因不使用命令行工具压缩 css/js，然后使用一个小 bash 脚本来处理部署过程？我的部署脚本包括缩小我使用的 css/js 以及运行 appcfg 命令。
在开发中，您需要未压缩的资产，而在生产中，您需要压缩它们。您是否手动将资产的路径从 .js 更改为 .min.js？您如何处理版本控制？
我有shared my deploy/development scripts here。在我的 html 中，我总是引用 .min.js 文件，然后我有一个用于开发的脚本 (run_debug.sh) 和一个用于部署的脚本 (deploy.sh)。他们都使用位于我的静态文件夹中的 compile.sh 脚本。它要么只是将开发 css/js 复制到 .min 文件中，要么进行实际的缩小。我不知道这是否有帮助，但至少我是这样做的:-)
我可以在这里提出一种替代解决方案：在单个 /style.css?cb=k2h4k23h4 上使用 memcached 和版本号/缓存破坏器。 style.css 指向一个类，该类检查缓存的同名键，如果找不到，则使用 css 文件列表，压缩它们并按顺序合并，然后存储在 memcached 中。同一文件的后续请求来自缓存，直到下一个版本在上传新资产时发生更改。对于我的用例，资产不经常更改，更改版本号的这一步就可以了。此 URL 也可以用作外部 CDN 的来源。
对于其他人来说这个有点老的问题，App Engine 中内置了对 Pagespeed 的支持：developers.google.com/appengine/docs/python/config/…

标签： google-app-engine minify

【解决方案1】：

您应该在实例启动时进行一次性检测，根据您的应用是否在开发服务器上运行来设置一些全局变量。您可以基于此生成资产所需的 URL，并为每个资产生成一个版本列表。

python 示例（full context）：

JQUERY_VERSION = '1.7.2'
JQUERY_UI_VERSION = '1.8.20'
ANGULAR_VERSION = '1.0.2'

if os.environ['SERVER_SOFTWARE'].startswith('Google'):
    JQUERY_URL = "//ajax.googleapis.com/ajax/libs/jquery/%(version)s/jquery.min.js" %{ 'version': JQUERY_VERSION }
    JQUERY_UI_URL = "//ajax.googleapis.com/ajax/libs/jqueryui/%(version)s/jquery-ui.min.js" %{ 'version': JQUERY_UI_VERSION }
    JQUERY_UI_CSS_URL = "//ajax.googleapis.com/ajax/libs/jqueryui/%(version)s/themes/base/jquery.ui.all.css" %{ 'version': JQUERY_UI_VERSION }
    ANGULAR_URL = "//ajax.googleapis.com/ajax/libs/angularjs/%(version)s/angular.min.js" %{ 'version': ANGULAR_VERSION }
else:
    JQUERY_URL = "/static/js/jquery-%(version)s.min.js" %{ 'version': JQUERY_VERSION }
    JQUERY_UI_URL = "/static/js/jquery-ui-%(version)s.min.js" %{ 'version': JQUERY_UI_VERSION }
    JQUERY_UI_CSS_URL = "/static/css/jquery-ui/jquery-ui-%(version)s.css" %{ 'version': JQUERY_UI_VERSION }
    ANGULAR_URL = "/static/js/angular-%(version)s.min.js" %{ 'version': ANGULAR_VERSION }

去例子（full context）：

func init() {
    angular_ver := "1.0.5"
    bootstrap_ver := "2.3.1"
    jquery_ver := "1.9.1"

    if appengine.IsDevAppServer() {
        Angular = fmt.Sprintf("/static/js/angular-%v.js", angular_ver)
        BootstrapCss = fmt.Sprintf("/static/css/bootstrap-%v.css", bootstrap_ver)
        BootstrapJs = fmt.Sprintf("/static/js/bootstrap-%v.js", bootstrap_ver)
        Jquery = fmt.Sprintf("/static/js/jquery-%v.js", jquery_ver)
    } else {
        Angular = fmt.Sprintf("//ajax.googleapis.com/ajax/libs/angularjs/%v/angular.min.js", angular_ver)
        BootstrapCss = fmt.Sprintf("//netdna.bootstrapcdn.com/twitter-bootstrap/%v/css/bootstrap-combined.min.css", bootstrap_ver)
        BootstrapJs = fmt.Sprintf("//netdna.bootstrapcdn.com/twitter-bootstrap/%v/js/bootstrap.min.js", bootstrap_ver)
        Jquery = fmt.Sprintf("//ajax.googleapis.com/ajax/libs/jquery/%v/jquery.min.js", jquery_ver)
    }
}

如果您有一个缩小本地（即非 CDN）内容的部署条，请在此处运行，并使用上述方法，但使用带有 .min 扩展名的本地 url。

【讨论】：