使用百度fis3构建前端多页应用

吾日三省吾身。

从一个完全不相干的行业转到it，多多少少都会感到迷茫，不知道学习什么、从何学起？在几乎没有任何经验的背景下，坚持投递简历，最后终于进入了一个创业公司，开始做起了前端工作。工资勉强维持生活。工作之余，也在不停的学习。

项目web页面多是用的jsp，项目组leader对html、css、js这块也不甚了解，所以大多数时候都是自己去研究怎么搞。

每次版本更新的时候都会遇到缓存的问题，然后自己就去找解决方案，然后就发现了fis3（http://fis.baidu.com/）这个前端构建工具，感觉还挺好用，又适合现在的项目。

 

基本用法也很简单：

• 安装
  需要先安装node和npm（注意：node版本最好安装9.xx以下的，否则fis3的某些功能不支持）
  直接命令行执行
  　　npm install -g fis3
  安装成功后，fis3 -v可以看到版本
  
  
• 开始
  fis3的构建不会修改源码，只是会通过设置，将构建结果输出到指定的目录中。它可以实现将相对路径转绝对路径，给文件加md5戳，这也是解决缓存问题的关键。
  建立项目文件夹，在项目根目录下建立fis-conf.js文件。这里的根目录也会作为设置绝对目录的依据，当然也可以自行通过设置，改变绝对路径的url。
  普通web页面一般只会用到下面几个功能：
  a. 文件md5戳
      

  fis.match('*.{css,js,png,jpg}', {
      usehash: true  
  })

  可以自行控制匹配项，有些文件不一定需要加文件指纹，可以

  fis.match('{reset.css,jquery.js}', {
      usehash: false
  })

  
  b. 资源压缩
  通常需要压缩的资源有css样式文件，js文件，图片等

  // css样式文件
  fis.match('*.css', {
      // fis-optimizer-clean-css插件已内置
      optimizer: fis.plugin('clean-css')
  })
  
  // js文件
  fis.match('*.js', {
      // fis-optimizer-uglify-js插件已内置
      optimizer: fis.plugin('uglify-js')
  })
  
  // png格式图片文件
  fis.match('*.js', {
      // fis-optimizer-png-compressor插件已内置，该插件不支持10.xx版本的node，所以需要用的的建议不要升级node
      optimizer: fis.plugin('png-compressor')
  })
  

  
  c. 雪碧图
  fis3可以对背景图片自动进行雪碧图合并，写样式的时候，后面加上?__sprite
  

  li.list1 {
    background-image: url('./img/list-1.png?__sprite');
  }
  
  li.list2 {
    background-image: url('./img/list-2.png?__sprite');
  }

  // 首先启用fis-spriter-csssprites 插件
  fis.match('::package', {
    spriter: fis.plugin('csssprites')
  })
  
  // 对设置了?__sprite的背景图片合并
  fis.match('*.css', {
    usesprite: true
  })

  
  d. sass、less预编译器
      sass：需要先安装fis-parser-node-sass插件
      npm install -g fis-parser-node-sass

  fis.match('*.scss', {
      parser: fis.plugin('node-sass'),
      rext: '.css',
      usehash: true    // 可以直接在这里添加md5戳
  });

      less：需要先安装fis-parser-less插件
      npm install -g fis-parser-less

  fis.match('*.less', {
      parser: fis.plugin('less'),
      rext: '.css'
  })

  页面中的样式文件仍然引用原文件

  <link rel="stylesheet" href="./css/xxx.less">
  <link rel="stylesheet" href="./css/xxx.scss">

  
  d. 预览与文件监听
      fis3内置server，可以使用命令
      fis3 server start 开启内置服务器，默认8080端口，fis3 server stop 关闭服务器。
      使用命令
      fis3 release -wl 将项目发布到内置服务器，并开启文件监听，在编辑器中修改代码，保存后会在浏览器（推荐使用chrome）实时更新。
  如果静态资源的访问路径与项目根路径不一致，可以使用url配置

  fis.match('*.{png,js,jpg,css,scss}', {
      url: '/src/pages$0'
  })

  这样就基本满足一个多页面web项目的要求了。
  

  添加了md5戳，再也不需要担心缓存问题了