前端打包工具之fis3的初級使用

說到打包工具，大家都會想到webpack，我之前也接觸過webpack，說實話個人覺得webpack上手容易，但是對於新手來說里面有太多坑，配置文件也不簡單。於是乎，我轉入了fis3陣營，發現fis3對於新手來說再合適不過了，fis3只用記住幾條命令就可以解決日常需求。下面開始講解：

1.fis3 release [-d 發布路徑]

發布代碼到fis3本地瀏覽器，括號中代表發布到哪個文件目錄下，不帶參數，默認發布到本地瀏覽器(可以使用第5條命令查看本地服務器路徑，會自動打開文件夾)

2.fis3 server start [-p 端口號]

開啟本地服務器，括號中代表設置端口號，如果發現端口號被占用。

3.fis3 server clean

清除fis3本地服務器代碼

4.fis3 release -wL

熱調試，可以實時預覽代碼改變后的效果，簡單實用

5.fis3 server open

自動打開本地服務器目錄

 更多命令，詳情參考（fis3官方文檔） http://fis.baidu.com/fis3/docs/beginning/intro.html

下面是我常用的配置，他可以編譯es6，7語法為es5，編譯預處理語言sass，less為css文件，自動添加css后綴（再也不用手動添加后綴了）壓縮合並js，css代碼，壓縮png，自動將小圖片icon轉換為base64字符，自動為文件加上hash或者MD5，自動生成csssprite（精靈圖或者叫做雪碧圖），自動將相對路徑轉化為絕對路徑，實時預覽，一鍵部署發布等功能。（僅僅只有40行，實現了這么多功能，是不是覺得比webpack簡單多了？還不趕緊用起來）

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

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

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

//支持 es6、es7 或者 jsx 編譯成 es5
fis.set('project.fileType.text', 'js');
fis.match('*.js', {
  parser: fis.plugin('babel-6.x'),
  rExt: '.js',
  optimizer: fis.plugin('uglify-js')
});

fis.match('*.less', {
  // fis-parser-less 插件進行解析
  parser: fis.plugin('less'),
  // .less 文件后綴構建后被改成 .css 文件
  preprocessor : fis.plugin("autoprefixer",{
        "browsers": ["last 10 versions"]
    }),
  rExt: '.css',
  optimizer: fis.plugin('clean-css')
});

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