如何在Google App Engine上縮小和版本js/css？

由於webassets won't work on GAE在運行中壓縮js/css，所以最好的方法是在部署時進行。如何在Google App Engine上縮小和版本js/css？

經過大量的谷歌搜索後，我想出了下面的腳本來實現這一點。

起初，我認爲最好的辦法是保留原來的base.html中的javascript路徑，並簡單地壓縮css/js。

cssmin壓縮css並覆蓋原來的。然而，封閉不允許覆蓋原來的內容，這個概念已經失敗了。

第二個問題是，即使我關閉覆蓋原始文件，緩存將是一個問題。由於這個原因，縮小的css/js的每個部署都應該帶有一個文件名中的隨機數，這樣新的版本實際上在新的部署之後被拾取。隨着我提出的概念，這將是不可能的。

因此，實現這一目標的唯一方法是使用sed或其他方法修改base.html。

在我重新發明車輪之前，有沒有更好的方法來做到這一點？非常感謝

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()

來源

2013-06-20 Houman

是否有一個特定的原因，沒有用命令行工具壓縮css/js，然後有一個小小的bash腳本來照顧部署過程？我的部署腳本包括縮小我使用的css/js以及運行'appcfg'命令。 – dlebech

在開發過程中，您需要未壓縮的資源，對於需要壓縮的生產。手工更改從.js到.min.js的資產路徑嗎？你如何處理版本控制？ – Houman

我有[在這裏共享我的部署/開發腳本]（https://gist.github.com/dlebech/5846132）。在我的html中，我總是引用.min.js文件，然後我有一個用於開發的腳本（run_debug.sh）和一個用於部署的腳本（deploy.sh）。他們都使用位於我的靜態文件夾中的compile.sh腳本。它或者將開發css/js複製到.min文件或者它實際上縮小了。我不知道這是否有幫助，但至少我是如何使其工作的:-) – dlebech

你應該做的實例啓動時的一次性檢測，設置一些全局變量取決於如果您的應用程序開發服務器上運行。您可以根據這些信息生成您的資產所需的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) 
    } 
}

如果你有一個部署stript是minifies本地（即非CDN）的內容，請運行在這裏，並使用上面的方法，但使用擴展名爲.min的本地URL。

來源

2013-06-20 22:44:10 mjibson

如何在Google App Engine上縮小和版本js/css？

回答

相關問題