有一件重要的事情需要考虑,这会使这一切变得更加复杂:缓存清除。
假设您在 custom.js 中有自己的脚本。您希望缓存 custom.js,以便您的 Web 应用程序运行得非常快。但是,当您更改代码时,您希望下载和使用新版本而不是旧的缓存版本。
缓存清除的常见解决方案是从 custom.js 创建一个哈希值并将其添加到您的文件名中。因此,您提供 custom.sdf879skdfhsdf9087we.js,当您更新代码时,您提供 custom.custom.gjf87dskhfhsdfv787we.js。同样的事情也适用于你的 CSS。
显然你想自动化这个。其次,当您提供 HTML 时,它需要知道正确的脚本/css 文件名以插入到您的 HTML 文件中。这是困难的部分。
一些 python 框架会为你处理这个问题。例如 Django 1.4 可以,但我在 Django 1.3 上启动了我的应用程序,我不得不自己动手。我想要的完整过程,与你的类似:
- 将多个js文件合并为一个文件
- 缩小js
- 为 CSS 创建哈希并更新输出文件名。
- 生成已更新输出文件名的 python 文件。
然后我的框架使用生成的 python 文件中的文件名。我的框架中还有一个全局设置,我可以在其中打开“调试”模式,该模式将使用原始 js 文件进行调试。CSS 也有类似的情况。
我将库保存在我实际的 GAE 项目文件夹之外,并使用了指向它的软链接。appcfg.py 将跟随链接并上传链接指向的任何内容。
(和 3)我使用 Apache ant,它在实际构建之前进行依赖项检查。因此,它不是每次都构建所有内容,而是只构建更改的内容。我不知道 Grunt 是否进行依赖检查,我认为它只是重建了所有内容。
最好将您的框架设置为提供缩小/组合文件或用于调试的原始文件。这将涉及一些自定义代码。
我刚刚写了一个小python脚本来调用ant(它做了前4个步骤)然后调用appcfg.py
作为一个额外的提示,您可以检测您是在 GAE 生产服务器上还是在开发服务器上运行:
import os
from google.appengine.api import apiproxy_stub_map
have_appserver = bool(apiproxy_stub_map.apiproxy.GetStub('datastore_v3'))
on_production_server = have_appserver and \
not os.environ.get('SERVER_SOFTWARE', '').lower().startswith('devel')
我还在两个不同的应用程序 ID 下运行我的应用程序,一个用于实际生产,一个作为 GAE 上的测试环境。我可以使用以下方法区分两者:
from google.appengine.api.app_identity import get_application_id
如果你想使用 ant,这里是我的 ant 构建文件的精简版。我仍在使用 YUI 压缩器而不是 uglify。它会生成一个名为 script_hashes.py 的文件,其中包含我稍后在模板中使用的脚本文件的所有名称。
<project name="eat" default="complete" basedir=".">
<taskdef resource="net/sf/antcontrib/antlib.xml">
<classpath>
<pathelement location="ant-contrib-1.0b3.jar"/>
</classpath>
</taskdef>
<target name="concatenate" depends="clean" description="Concatenate all files for stove POS">
<concat destfile="tmp/bootstrap-dropdown-transition-modal-tmp.js">
<filelist dir="bootstrap/docs/assets/js" files="bootstrap-dropdown.js, bootstrap-transition.js, bootstrap-modal.js"/>
</concat>
<concat destfile="tmp/stovepos-tmp.js">
<filelist dir="stove/scripts" files="pos-combo1.js, pos-combo2.js, pos-combo3.js"/>
<filelist dir="eat/scripts" files="eat.js, eatorder.js, eatchannel.js, fastbtn.js"/>
<filelist dir="stove/scripts" files="soundmanager2-nodebug-jsmin.js, stovepos.js"/>
</concat>
<concat destfile="tmp/stovehome-tmp.js">
<fileset file="bootstrap/docs/assets/js/bootstrap-dropdown.js"/>
<fileset file="eat/scripts/eat.js"/>
<fileset file="stove/scripts/stovehome.js"/>
</concat>
</target>
<target name="compress_js" depends="concatenate" description="Compress Javascript">
<mkdir dir="scripts"/>
<for param="file">
<path>
<fileset dir="tmp" includes="**/*.js"/>
</path>
<sequential>
<apply executable="java" parallel="true">
<fileset file="@{file}" />
<arg line="-jar" />
<arg path="../Downloads/yuicompressor-2.4.7/build/yuicompressor-2.4.7.jar" />
<srcfile />
<arg line="-o" />
<mapper type="glob" from="*-tmp.js" to="scripts/*-min.js" />
<targetfile />
</apply>
</sequential>
</for>
</target>
<target name="compress_css" depends="concatenate" description="Compress CSS">
<mkdir dir="scripts"/>
<for param="file">
<path>
<fileset dir="tmp" includes="**/*.css"/>
</path>
<sequential>
<apply executable="java" parallel="true">
<fileset file="@{file}" />
<arg line="-jar" />
<arg path="../Downloads/yuicompressor-2.4.7/build/yuicompressor-2.4.7.jar" />
<srcfile />
<arg line="-o" />
<mapper type="glob" from="*-tmp.css" to="scripts/*-min.css" />
<targetfile />
</apply>
</sequential>
</for>
</target>
<target name="clean_tmp" depends="compress_js, compress_css" description="remove all -tmp files">
<delete dir="tmp"/>
</target>
<target name="complete_js" depends="clean_tmp" description="add checksum to filename">
<for param="file">
<path>
<fileset dir="scripts" includes="**/*.js"/>
</path>
<sequential>
<var name="md5" unset="true"/>
<checksum file="@{file}" property="md5"/>
<move todir="scripts">
<fileset file="@{file}"/>
<globmapper from="*.js" to="*.${md5}.js"/>
</move>
<var name="filename" unset="true"/>
<propertyregex input="@{file}" regexp="([^/]*).js$$" select="\1" property="filename"/>
<var name="filename_" unset="true"/>
<propertyregex input="${filename}" regexp="-" replace="_" property="filename_"/>
<propertyfile file="script_hashes.py">
<entry key="${filename_}" value="'${md5}'"/>
</propertyfile>
</sequential>
</for>
</target>
<target name="complete_css" depends="clean_tmp" description="add checksum to filename">
<for param="file">
<path>
<fileset dir="scripts" includes="**/*.css"/>
</path>
<sequential>
<var name="md5" unset="true"/>
<checksum file="@{file}" property="md5"/>
<move todir="scripts">
<fileset file="@{file}"/>
<globmapper from="*.css" to="*.${md5}.css"/>
</move>
<var name="filename" unset="true"/>
<propertyregex input="@{file}" regexp="([^/]*).css$$" select="\1" property="filename"/>
<var name="filename_" unset="true"/>
<propertyregex input="${filename}" regexp="-" replace="_" property="filename_"/>
<propertyfile file="script_hashes.py">
<entry key="${filename_}_css" value="'${md5}'"/>
</propertyfile>
</sequential>
</for>
</target>
<target name="complete" depends="complete_js, complete_css">
</target>
<target name="clean" description="remove all -tmp and -min files">
<delete dir="tmp"/>
<delete dir="scripts"/>
<delete file="script_hashes.py"/>
</target>
</project>