fis3在asp.net项目中的使用记录

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，开发环境都是和静态页面时相似，只是通过配置来迎合后端框架的目录结构以及页面布局