fis3-learn - 2 配置篇

fis3-learn - 2 配置篇

功能組合

！！！此部分內容只是彙總僅供參考，詳細內容見http://fis.baidu.com/fis3/docs/beginning/intro.html

建議先大致看一遍下面內容，然後到上面鏈接詳細瞭解，再回來看彙總

1. 用 FIS3 做壓縮、文件指紋、圖片合併、資源定位

fis3 release時添加 md5、靜態資源壓縮、css 文件引用圖片進行合併

// 加 md5
fis.match('*.{js,css,png}', {
  useHash: true
});

// 啓用 fis-spriter-csssprites 插件
fis.match('::package', {
  spriter: fis.plugin('csssprites')
})

// 對 CSS 進行圖片合併
fis.match('*.css', {
  // 給匹配到的文件分配屬性 `useSprite`
  useSprite: true
});

fis.match('*.js', {
  // fis-optimizer-uglify-js 插件進行壓縮，已內置
  optimizer: fis.plugin('uglify-js')
});

fis.match('*.css', {
  // fis-optimizer-clean-css 插件進行壓縮，已內置
  optimizer: fis.plugin('clean-css')
});

fis.match('*.png', {
  // fis-optimizer-png-compressor 插件進行壓縮，已內置
  optimizer: fis.plugin('png-compressor')
});

2. 上面配置追加如下配置，fis3 release debug啓用 media debug 的配置，覆蓋上面的配置，把諸多功能關掉。

fis.media('debug').match('*.{js,css,png}', {
  useHash: false,
  useSprite: false,
  optimizer: null
})

** 啓動服務服務知識小補充

- 使用`fis server open ` 可以打開編譯目錄，
- 使用`fis server info` 可以查看server配置信息
- 使用`fis server clean` 可以清空編譯目錄
- 使用`fis3 release -wL` `w`參數可以對文件進行監聽修改文件會構建發佈。而且其編譯是增量的，編譯花費時間少。`L`參數瀏覽器自動刷新

3. 上傳測試服務器

// 其他配置
...
fis.media('qa').match('*', {
  deploy: fis.plugin('http-push', {
    receiver: 'http://cq.01.p.p.baidu.com:8888/receiver.php',
    to: '/home/work/htdocs' // 注意這個是指的是測試機器的路徑，而非本地機器
  })
});

這樣就可以使用fis3 release qa上傳測試機器，fis3 release產出到本地測試服務器根目錄

4. 替代內置Server

FIS3 內置了一個 Web Server 提供給構建後的代碼進行調試。如果你自己啓動了你自己的 Web Server 依然可以使用它們。

假設你的 Web Server 的根目錄是 /Users/my-name/work/htdocs，那麼發佈時只需要設置產出目錄到這個目錄即可。

fis3 release -d /Users/my-name/work/htdocs

如果想執行 fis3 release 直接發佈到此目錄下，可在配置文件配置；

fis.match('*', {
  deploy: fis.plugin('local-deliver', {
    to: '/Users/my-name/work/htdocs'
  })
})

5. 補充配置

示例在上一篇起步裏下載的 demo-lv1 裏面可以看到
兩套配置方案，用fis3 release dev -ld ./output和 fis3 release production -ld ./output-production進行區分，
其中，dev爲默認，如果不寫默認使用dev裏面的配置

// default settings. fis3 release
fis
  .media('dev')

  .match('**', {
    useHash: false
  });


// fis3 release production
fis
  .media('production')

  .match('*.js', {
    optimizer: fis.plugin('uglify-js')
  })

  .match('*.{css,scss}', {
    optimizer: fis.plugin('clean-css')
  })

  .match('*.png', {
    optimizer: fis.plugin('png-compressor')
  });

---

在上一篇起步篇下載的文件中有demo-lv1.zip初級示例和fis3-demo.zip綜合示例，建議分別嘗試一下

fis中一共包含一下三個命令

fis3 install
fis3 release
fis3 server

分別是安裝插件，編譯部署，發佈到服務器（其中服務器支持php，nodejs等模擬服務器）

以上三條命令基本解決了大部分前端問題

更詳盡的內容都在fis-conf.js文件配置參數裏面，本文總結了大部分常用配置，建議完整看完官方配置內容再回來看會中內容

fis支持glob語法，對於正則不是很好的童鞋也是個福音哈

行文匆忙難免會有紕漏，如果發現錯誤請在評論中指出，持續更新……