2013-06-20 7 views
6

Seit webassets won't work on GAE eine js/css im laufenden Betrieb zu komprimieren, scheint es der beste Ansatz, es bei der Bereitstellung zu tun.Wie kann man js/css in der Google App Engine minimieren und versionieren?

Nach viel googeln kam ich mit dem Skript unten, um dies zu erreichen.

Zuerst dachte ich, das Beste wäre, den JavaScript-Pfad in base.html zu lassen, wie es ist, und einfach komprimieren Sie die CSS/JS.

cssmin komprimiert das CSS und überschreibt das Original. Die Schließung erlaubt jedoch kein Überschreiben des Originals und dieses Konzept schlägt bereits fehl.

Das zweite Problem ist, auch wenn ich Schließung die ursprüngliche Datei überschreiben, Caching wird ein Problem sein. Aus diesem Grund sollte jede Implementierung von minimierten css/js mit einer Zufallszahl im Dateinamen versehen sein, so dass die neuen Versionen nach einer neuen Bereitstellung tatsächlich übernommen werden. Mit dem Konzept, das ich mir ausgedacht habe, wird dies jedoch nicht möglich sein.

Die einzige Möglichkeit, dies zu erreichen, wäre die base.html mit sed oder etwas ändern.

Bevor ich das Rad neu erfinde, gibt es einen besseren Ansatz, dies zu tun? Vielen Dank

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

Gibt es einen bestimmten Grund dafür, css/js nicht mit Kommandozeilen-Tools zu komprimieren und dann ein kleines Bash-Skript zu haben, um den Deployment-Prozess zu erledigen? Mein Deployment-Skript besteht sowohl aus der Minimierung der css/js, die ich verwende, als auch dem Ausführen des 'appcfg'-Befehls. – dlebech

+0

In der Entwicklung benötigen Sie die unkomprimierten Assets und für die Produktion benötigen Sie sie komprimiert. Ändern Sie den Pfad zu Ihren Assets manuell von .js zu .min.js? Und wie gehst du mit der Versionierung um? – Houman

+0

Ich habe [meine Bereitstellungs-/Entwicklungsskripts hier geteilt] (https://gist.github.com/dlebech/5846132). In meinem HTML referenziere ich immer die .min.js Dateien und dann habe ich ein Skript für die Entwicklung (run_debug.sh) und eines für die Bereitstellung (deploy.sh). Beide verwenden das Skript compile.sh, das sich in meinem statischen Ordner befindet. Es kopiert entweder nur die Entwicklung css/js in die .min-Datei oder es führt tatsächlich eine Verkleinerung durch. Ich weiß nicht, ob das hilfreich ist, aber das ist zumindest, wie ich es zum Laufen bringe :-) – dlebech

Antwort

1

Sie sollten eine einmalige Erkennung auf Startinstanz tun, dass einige globale Vars setzt je nachdem, ob Ihre App auf dem Dev-Server ausgeführt wird. Sie generieren basierend darauf URLs, die Sie für Ihre Assets benötigen, und haben eine Liste von Versionen für jedes Asset.

Python Beispiel (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 } 

Beispiel gehen (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) 
    } 
} 

Wenn Sie eine deploy stript, die Ihren lokalen minifies (dh nicht CDN) Inhalt, ausführen, Klicken Sie hier und verwenden Sie die obige Methode, aber mit einer lokalen URL mit der Erweiterung .min.