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

1.fis3 release [-d 發(fā)布路徑]

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

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

開啟本地服務(wù)器，括號中代表設(shè)置端口號，如果發(fā)現(xiàn)端口號被占用。

3.fis3 server clean

清除fis3本地服務(wù)器代碼

4.fis3 release -wL

熱調(diào)試，可以實時預(yù)覽代碼改變后的效果，簡單實用

5.fis3 server open

自動打開本地服務(wù)器目錄

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

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

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

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

// 對 CSS 進(jìn)行圖片合并
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 插件進(jìn)行解析
  parser: fis.plugin('less'),
  // .less 文件后綴構(gòu)建后被改成 .css 文件
  preprocessor : fis.plugin("autoprefixer",{
        "browsers": ["last 10 versions"]
    }),
  rExt: '.css',
  optimizer: fis.plugin('clean-css')
});

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

總結(jié)

以上是生活随笔為你收集整理的前端打包工具之fis3的初级使用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。