How to minimize js / css version in Google App Engine?

Question

Since webassets will not work in GAE to compress js / css on the fly, it seems that it is best to do this when deploying.

After many searches, I came up with the script below to achieve this.

At first, I thought it was best to leave the javascript path in base.html as it is, and just compress css / js.

cssmin compresses css and overwrites the original. However, closing does not allow overwriting the original, and this concept has already been completed.

The second problem is that even if I have a closure overwriting the original file, caching will be a problem. For this reason, each deployment of mini css / js must be accompanied by a random number in the file name, so that new versions are actually collected after the new deployment. With the concept that I came up with, it will be impossible.

Therefore, the only way to achieve this is to change base.html to sed or something else.

Before reinventing the wheel, is there a better way to do this? Thank you very much

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

Answer 1

You must do a one-time discovery when starting an instance that installs some global options depending on whether your application is running on a dev server. You generate the URLs you need for your assets based on this, and have a list of versions for each asset.

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

go example ( 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) } } 

If you have a deployment coupler that minimizes your local (i.e., not CDN) content, run this here and use the method above, but with a local url with the extension .min.