fis3是比较流行的一个自动打包工具,在纯静态的页面中相信只要看过文档的小伙伴都能自如的应用,但是如果公司使用的是asp.net开发,使用起来就不太方便了,因为mvc使用了一些目录结构的限制,还有进行页面布局的控制。
1.找一个合适的目录存放你的静态资源以及.cshtml页面,通过编译发布到asp.net指定的目录,比如项目img,css ,css都是放在content文件夹下的,而页面放在视图view文件夹下,这个时候你可以使用编译命令实现分别把编译后的页面和css放到对应的位置:
//设置页面路径
//发布页面 fis.match('*.cshtml',{ release:'/views/soccer/$0' });
//静态资源发布到content
fis.match('sass/(**.png)',{ release:'/content/soccer/img/$1' })
注意,在没有编译前的cshtml和js这些静态资源是使用相对路径引入的,目录部署就和纯静态页面部署一样,通过修改release熟悉来迎合mvc的固定布局,这也是区分开了开发环境和目录部署环境。
接下来讲几个配置fis-conf.js的细节:
基于页面压缩js,css的时候,怎么自定义路径和名字:
fis.match('::package',{ postpackager:fis.plugin('loader',{ allInOne:true //这个时候会使用默认的名字和编译路径 }) });
//自定义路径和自定义名字
fis.match('::package',{ postpackager:fis.plugin('loader',{ allInOne:{ //js:'/content/soccer/js/'+version+'/${filepath}_all.js', css:'/content/soccer/css/'+version+'/${filepath}_all.css' } }) });
2.怎么样才能之选到被命中的文件,而不是连同文件夹一起被选中
比如:
img文件夹
icon文件夹
aa.png文件
选中png文件:
fis.match('img/*.png',{
release:'static/$0'
});
这个样子得到的目录结构是这个样子的
static文件夹
img文件夹icon文件夹aa.png文件可是现在需求是只要static文件夹下面直接放png图片,不需要有子文件夹包含,这个时候可以这样
fis.match('img/(*.png)',{
release:'static/$1' //这样就可以得到我们想要的了
})
fis3使用的是node-glob,想要了解详细的可以参考这里:http://fis.baidu.com/fis3/docs/api/config-glob.html
//有时候合并js我们需要声明顺序或者某个文件要在前面,这个时候可以这样
//控制packTo合并文件的顺序,值越小越前面,默认0 fis.match('/Soccer/js/js_module/main.js',{ packOrder:-100 });这样就会把main.js放在打包文件的前头
我们在本地调试的时候显然是不需要压缩的,难道我们要不断修改配置文件?显然有更好的方法可以解决:
//当在开发环境时,不需要压缩和哈希 fis3 release debug -d <path> fis.media('debug').match('*',{ useHash:false, optimizer:null });当使用fis3 release debug命令编译时会使用fis.media('debug')的配置去打包文件
对于一个频繁更新的项目来说,最怕的就是缓存,特别是cdn缓存,由于缓存可能会导致一系列的错误,解决办法:
在静态资源后面加上参数?md5 但是这种方法在cdn不支持
给静态资源加上一个版本号,每次打包都产生一个版本号,静态支援就存放在这里,推荐使用
比如:
//得到一个版本号,年.月.日_时-分组合成的版本 var date=new Date(); var version=date.getFullYear()+'.'+(date.getMonth()+1)+'.'+date.getDate()+'_'+date.getHours()+'-'+date.getMinutes();//用日期确定版本号fis.match('::package',{ postpackager:fis.plugin('loader',{ allInOne:{ //js:'/content/soccer/js/'+version+'/${filepath}_all.js', css:'/content/soccer/css/'+version+'/${filepath}_all.css' } }) });这样就每次合并的css都有一个版本号,解决了缓存导致的问题
总结:总而言之,不管在什么项目用fis3,开发环境都是和静态页面时相似,只是通过配置来迎合后端框架的目录结构以及页面布局