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