Fis3前端工程化之項目實戰

Fis3項目

---

項目目錄結構:

E:.
│  .gitignore
│  fis-conf.js
│  index.html
│  package.json
│  README.md
│
├─material
│
└─resource
    ├─css
    ├─images
    └─js
        ├─lab
        │  │
        │  └─until
        └─ui

項目要求:

1.雪碧圖

2.代碼模塊化

3.預處理

4.md5戳

5.壓縮資源

雪碧圖

---

啓用雪碧圖插件,fis3已內置

fis.match('::package', {
  spriter: fis.plugin('csssprites')
})

設置雪碧圖的合併格式

fis.config.set('settings.spriter.csssprites', {
  margin: 10, //圖之間的邊距
  layout: 'matrix' //使用矩陣排列方式，默認爲線性`linear`
});

預處理

---

由於使用的是less，因此須要預處理less文件

經過fis-parser-less插件能夠處理

安裝npm install -g fis-parser-less

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

代碼模塊化

---

Mod.js

我這裏使用的Mode.js,這個百度開發的一個獨立的模塊化庫。

包裹JS

除了mode.js之外咱們還須要npm install -g fis-hook-commonjs來安裝一個模塊化"包裹"庫。

它的做用就是將咱們的js代碼外面包裹一層,好比咱們經常使用的:jquery.lazyload

經過fis-hook-commonjs包裹後：

define('resource/js/lab/jquery.lazyload', function(require, exports, module) {
    //jquery.lazyload代碼
});

而後經過require('resource/js/lab/jquery.lazyload')這種形式就能夠加載咱們須要的庫了。

設置是否包裹

固然這裏咱們能夠經過fis-conf.js來控制須要包裹的js。

//指定目錄文件進行define包裹
fis.match('/resource/js/lab/**.js', {
  isMod: true
})

經過isMode這個屬性便可，true意爲包裹，false意爲不包裹。

添加別名(謹慎使用)

固然經常使用的jquery的話，咱們能夠經過下面這種設置來添加別名等。

fis.hook('commonjs')
  .match('/resource/js/lab/jquery.js', {
    id: 'jquery'
  })

調用var $=require('jquery')

控制打包順序

//設置mod.js的優先級在打包文件的第一位
fis.match('/resource/js/lab/mod.js', {
  packOrder: -100
})

這裏是經過packOrder來處理打包的順序，值越小打包越靠前。-100比-99靠前。

資源合併

資源合併是咱們經常使用的功能，這裏我經過安裝npm install fis3-postpackager-loader這個庫來處理靜態文件文件的資源配置。

他會對頁面的js,css進行掃描，處理咱們須要的文件。

好比咱們不想將jquery文件合併，咱們能夠在html頁面中這麼處理。

<script type="text/javascript" src="../resource/js/lab/until/interactive.js"></script><!--ignore-->

添加<!--ignore-->這個標記便可。

這樣頁面的這個文件就不會被處理了。

啓用fis3-postpackager-loader

fis.match('::package', {
  postpackager: fis.plugin('loader')
});

咱們的html文件會引入多個js，css。這樣的話咱們會將他們合併成單個文件，提升性能。

<script type="text/javascript" src="../resource/js/lab/until/interactive.js"></script>
    <script type="text/javascript" src="../resource/js/lab/until/tabchange.js"></script>
    <script type="text/javascript" src="../resource/js/ui/swip.js"></script>
    <script type="text/javascript" src="../resource/js/ui/tab.js"></script>
    <script type="text/javascript" src="../resource/js/ui/main.js"></script>

經過下面配置處理

//靜態資源加載器配置 npm install fis3-postpackager-loader
//不想加載的引入資源使用<!--ignore-->標記
//合併頁面js
//不進行任何配置 css,js的合併使用fis的pack
fis.match('::package', {
  postpackager: fis.plugin('loader')
});

//對合並的aio.css進行處理 打包的會自動進行csssprites
fis.config.set('pack', {
  '/static/js/index_aio.js': [
    '**.js'
  ],
  '/static/css/index_aio.css': [
    '**.css',
    '**.less'
  ]
});

這樣處理打包後的static目錄下狀況:

├─css
│      index_aio.css
│      index_aio_z.png
│
└─js
        index_aio.js

md5戳

---

給js,css添加md5戳，使用useHash

fis.media('prod')
  .match('/static/**.{css,js}', {
    useHash: true
  })

壓縮資源

---

fis.media('prod')
  .match('/resource/**.js', {
    optimizer: fis.plugin('uglify-js')
  })
  .match('/resource/**.{css,less}', {
   optimizer: fis.plugin('clean-css')
  })
  .match('/static/**.png', {
    optimizer: fis.plugin('png-compressor')
  })

將js,css,png進行壓縮。壓縮器fis3已內置,不須要安裝庫。

最後

---

注意fis3的配置文件中的操做順序會影響你須要的結果