使用百度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戳，再也不需要擔心緩存問題了