概述
詳細
一、安裝fis3（確保已經安裝了node）
執行cmd命令：
npm install -g fis3
安裝完成后，測試是否安裝成功，輸入命令：
fis3 -v
如圖所示說明安裝成功！
二、新建項目（此處我以Hbuilder開發工具為例）
1）新建web項目
目錄結構：
2）fis3配置
fis3配置文件為fis-conf.js，它所在的文件目錄為項目根目錄，例如我這里新建的項目Test的根目錄為src。
fis-conf.js的配置內容如下：
fis.hook('relative');
//讓所有文件，都使用相對路徑。
fis.match('**', {
relative: true
})
//不壓縮layout目錄下的文件
fis.match('layout/**', {
release: false
});
//發布時，忽略項目中的這些文件
fis.set('project.ignore', ['.git/**', 'fis-conf.js', '*.bat']);
//將css文件夾下所有以scss結尾的文件轉換為以css結尾的文件
fis.match('css/**.scss', {
rExt: '.css',
parser: fis.plugin('node-sass'),
packTo: 'css/app.min.css'
})
//壓縮合並js文件
fis.match('js/**.js', {
// fis-optimizer-uglify-js 插件進行壓縮，已內置
optimizer: fis.plugin('uglify-js', {
mangle: {},
compress: {
drop_console: true
}
}),
packTo: 'js/app.min.js'
});
//壓縮合並css文件
fis.match('*.css', {
// fis-optimizer-clean-css 插件進行壓縮，已內置
optimizer: fis.plugin('clean-css')
});
//壓縮整合圖片
fis.match('*.{png,jpg}', {
// fis-optimizer-png-compressor 插件進行壓縮，已內置
optimizer: fis.plugin('png-compressor')
});
fis.match('*.js', {
// fis-optimizer-uglify-js 插件進行壓縮，已內置
optimizer: fis.plugin('uglify-js')
});
fis.media('debug').match('*.{js,css,png}', {
useHash: false,
useSprite: false,
optimizer: null
})
tips：一定要寫相對路徑，相對於根目錄（src）的路徑 !!!
3）瀏覽器自動刷新
當我們在寫/改代碼的時候，總要手動刷新或重開瀏覽器才能看到效果，那么fis3的好處就是可以配置自動刷新功能，再也不用手動刷新啦~~~
一起來配置吧~~
在dev.bat文件中添加如下命名語句：
fis3 release -wL
保存該文件，以后修改文件之前先雙擊該程序，如圖，每次修改后保存文件，該程序自動記錄修改時間，並啟動網頁即時刷新。請勿關閉該窗口 !!!
4）項目發布
源代碼是不能直接發布到服務器上的，所以需要通過fis3來重新發布一下。
具體步驟如下：
在release.bat文件中添加如下命令：
fis3 release -d ../output
意思是：將根目錄下的所有文件發布到output 文件夾中，此處../output應和src在同一目錄下。
tips：前面配置文件fis-conf.js中已經被忽略的文件不被發布 !!!
保存release.bat文件，發布項目時，雙擊該程序即可。
5）測試
以上5步完成fis3配置，接下來我們來一起測試一下是否起作用~~~
如圖，先新建這些文件：
在index頁面添加如下代碼：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>test</title> <link rel="import" href="layout/_header.html?__inline" /> </head> <body> <div> <h2>歡迎來到王者榮耀</h2> <h3>敵軍還有5秒鍾到達戰場，請做好准備！</h3> <p><b>全軍出擊！！！</b></p> </div> <link rel="import" href="layout/_footer.html?__inline" /> </body> </html>
在index.scss文件中添加如下代碼：
*{
font-size:16px;
color: #666;
font-family: "arial narrow";
}
/**隨意添加，意圖測試**/
在01.scss文件添加如下代碼：
#otbale{
border-collapse:collapse;
tr>td{
padding: 10px;
}
thead{
tr{
background: yellow;
td{
font-weight: 800;
}
}
}
tbody{
tr>td{
color: #fff;
}
tr:nth-child(2n){
background: red;
}
tr:nth-child(2n+1){
background: blue;
}
}
}
在_header.html文件中添加代碼：
<link rel="stylesheet" href="../css/app.min.css" />/**引入壓縮文件，此文件在項目目錄中不能看見**/
保存以上所有文件內容，如果此時你已經打開了dev.bat窗口，請關閉重啟。
打開cmd窗口，輸入命令啟動項目：
fis3 server start
網頁自動打開：
此時修改並保存html文件或者scss文件都能看到此網頁自動刷新，且dev.bat有修改時間記錄。
說明我們的自動刷新功能配置成功！
打開網頁源代碼，找到app.min.css文件，點擊打開：
如圖則說明fis-conf.js中的css部分配置成功！
js部分與css一樣，您可以在js文件夾下新建幾個js文件，引入到_footer.html文件中，並將_footer.html文件引入到index.html中，同樣保存后重啟dev.bat，再刷新一下頁面，即可看到效果。此處我新建了兩個文件index.js和01.js，內容分別是：
window.onload=function(){
alert(1);
}
document.documentElement.onclick=function(){
alert("Hello world");
}
頁面刷新后執行成功，查看源代碼，找到app.min.js，點擊打開，如圖：
成功！
說明我們的fis-conf.js文件配置成功，以后所有新建的scss文件和js文件都會被轉換壓縮到app.min.css和app.min.js文件中，且這兩個文件不需要手動新建，在目錄中也不能查看，直接在網頁源代碼即可看到。