对于单应用型网页,假设入口为 index.html, 它引用一些js与css。(部分js会动态加载其它js文件) 当其中的一些文件更新后,看到的现象:
经分析:
我们希望的结果是:
注意:
<meta http-equiv="Cache-Control" content="no-cache" />
理论上应与设置HTTP头相同,但试验对微信浏览器或Webview无效.
在Apache的配置文件中设置目录的AllowOverride All权限,允许目录使用.htaccess自定义规则:
<Directory "/alidata/www/default/cheguanjia/"> Options FollowSymLinks AllowOverride All Order allow,deny Allow from all # Require all granted </Directory>
(新版本的apache可以用Require语句替代上两句)
对于想要禁用缓存的目录(例如移动客户端目录 m2
下),可以添加配置文件 .htaccess:
<FilesMatch "(\.html|\/)$"> #Header set Cache-Control "max-age=604800" Header set Cache-Control "no-cache" </FilesMatch>
注意:成熟的Web服务器一般都支持文件版本(通过ETag等)检查,即浏览器请求的文件如果没有变化,则不会传输文件。 因而,设置"no-cache"并不意味着客户端每次都要重新到服务器取文件,而是要求浏览器每次都去服务器检查文件是否需要更新。
对所有的易变资源, 引用时加个标识如__HASH__
html中: <script src="main.js"></script> --> <script src="main.js?__HASH__"></script> JS中: loadScript("cordova/cordova.js"); --> loadScript("cordova/cordova.js?__HASH__");
通过编译工具以上最终生成
<script src="main.js?v=321f2a"></script> (__HASH__被改成文件的sha1代码后6位)
以上修改风格称为“覆盖式发布”。如果要使用“非覆盖式发布”,编译工具可生成:
<script src="main_321f2a.js"></script>
编译工具需求:
__HASH__
部分
部署工具:
编译工具webcc
webcc {src-folder} -o {web-folder}
[参数]
[工作原理]
webcc做以下工作:
它结合git工作,比如取要处理的所有文件,用 git ls-files
取某版本以来的文件,用 git diff rev1 head --name-status
更新完成后,输出VERSION_SRC文件。
[配置文件]
{src-folder}下的webcc.conf.php为配置文件。
示例:
<?php $COPY_EXCLUDE = [ 'm1/*', 'wap/*' ]; /* $FILES = [ 'm2/index.html' ]; */ $RULES = [ 'm/*.html' => 'HASH', // 对m目录下所有html文件进行HASH处理 'm/app_fw.js' => 'HASH', 对 m/app_fw.js 文件进行HASH处理 // 指定脚本,其中先做了js文件归并,再用jsmin工具做压缩; $TARGET表示最终文件。 'm2/cordova/cordova.js' => ' cd m2/cordova cat cordova.js cordova_plugins.js \ plugins/cordova-plugin-splashscreen/www/splashscreen.js \ plugins/org.apache.cordova.camera/www/Camera.js \ plugins/org.apache.cordova.camera/www/CameraConstants.js \ plugins/org.apache.cordova.camera/www/CameraPopoverHandle.js \ plugins/org.apache.cordova.camera/www/CameraPopoverOptions.js \ | jsmin > $TARGET ', ]; ?>
解读:
$COPY_EXCLUDE
中定义了在m1/ wap/目录下的文件不做复制处理。
$FILES
明确定义了要处理的文件,一般只用于调试;这里已注释掉。
$RULES
里面定义了几条规则,满足正则式则执行之后的步骤。步骤可以是一个数组(表示多步,依次处理)或一个字符串(只有一步)。每一步可以定义:
__HASH__
标识换为实际文件的hash值。对html文件,还可根据WEBCC_BEGIN等标识做文件归并。
\)COPY_EXCLUDE
中指定。
[HASH处理规则]
将 __HASH__
标识换为实际文件的hash值。对html文件,还可根据WEBCC_BEGIN等标识做文件归并。
例如: m2/index.html中:
<script src="../m/app_fw.js?__HASH__"></script>
将会替换为
<script src="../m/app_fw.js?v=3a4bac"></script>
webcc在找文件时,自动以当前文件 (m2/index.html)所在目录(即m2目录)作为相对目录去找。如果目录不正确,可用 __HASH__,{dir}
方式指定正确目录.
例如,在 m/app_fw.js 中:
loadScript("cordova-ios/cordova.js?__HASH__,m2"); // 缺省webcc以 m/app_fw.js 所在目录即 "m/" 来找文件,而这里指定了目录为 "m2/", 所以webcc会查找文件 "m2/cordova-ios/cordova.js".
可以在html文件中定义了归并规则,例如文件 m2/index.html 中定义
<!-- WEBCC_BEGIN --> <script src="../m/common.js"></script> <script src="../m/app_fw.js"></script> <script src="../m/app.js"></script> <!-- WEBCC_USE_THIS <script src="../m/app.min.js?__HASH__"></script> WEBCC_END -->
这表示:
<script src="../m/app.min.js?v=3a3345"></script>通过注释技巧,使得测试时 WEBCC_USE_THIS 中的内容实际被注释掉,因而使用的是归并前的版本,而归并后该注释被打开,从而使用新文件 app.min.js。
$RULES = [ 'm/lib-app.min.js' => [' // 第一步,先归并 common.js等几个文件,并通过jsmin进行压缩 'cd m cat common.js app_fw.js app.js | jsmin > $TARGET', // 第二步,再对合并的文件中使用 `__HASH__`的部分进行处理 'HASH' ] ]; 注意: - 文件匹配及脚本中的路径分隔一律用"/"而不是"\" - 脚本最终通过sh执行,不要写成bat脚本。
工具:
准备:
jdcloud
, 那么在同一级创建一个发布目录名称为jdcloud-online
,用git进行初始化。它将对应线上版本。
mkdir jdcloud-online cd jdcloud-online git init
发布步骤:
build_web.sh
注意:
推荐: