gulp-ya-merge
gulp-ya-merge
并不用来压缩静态文件,而是用于在静态文件被压缩后,对html页面引用的的静态文件进行合并和追加文件版本等操作。
用法
var destDir = "dist";var merge = ;var options = rootPath: process + '/share/static/'; gulp;
选项
gulp-ya-merge
可传入一个对象作为参数,选项的可选值如下:
参数 | 说明 | 默认值 |
---|---|---|
rootPath |
静态文件的根目录 | 当前目录 |
leftFlag |
合并区间代码的起始标识 | <!--min[ |
rightFlag |
合并区间代码的结束标识 | ]--> |
newPath |
合并后要替换的地址。{$base}代表目录及文件名(不包括后缀),{$stamp}代表文件版本号,{$ext}代表文件的后缀 | StaticUrl(\'{$base}-{$stamp}{$ext}\')?> |
hashLength |
文件版本号的长度 | 8 |
scriptExp |
要替换的非合并的script标签的正则表达式 | /(<script\s(?:.)$this->StaticUrl(['"])([^'"-]+)(['"])(?:[^/])></script>)/gm |
linkExp |
要替换的非合并的link标签的正则表达式 | /(<link\s(?:.)$this->StaticUrl(['"])([^'"-]+)(['"])(?:[^/])(?:/?> |
需要注意的是:
scriptExp
和linkExp
需要包括3对小括号,第1对小括号表示静态文件前面的匹配内容,第2对小括号表示静态文件的网址,第3对小括号表示静态文件后面的匹配内容。
语法规则
下面用${xxx}表示上面的配置项,归结html代码的规则如下:
{$leftFlag}{$flag1} {$destPath1}.js{$rightFlag}{scriptExp}{$leftFlag}{$flag1}{$rightFlag} {$leftFlag}{$flag2} {$destPath2}.css{$rightFlag}{linkExp}{$leftFlag}{$flag2}{$rightFlag} {$scriptExp}{$linkExp}
最后将变成如下的代码:
示例
<!-- <meta name="robots" content="nofollow">--><!--min[style /static/css/jiehun.n.min.css]--><!--min[style]--><!--min[hapj /static/js/hapj.n.min.js]--><!--min[hapj]-->
经过gulp-ya-merge
的处理,最后变成了如下代码:
<!-- <meta name="robots" content="nofollow">-->