執行cmd命令:css
npm install -g fis3
安裝完成後,測試是否安裝成功,輸入命令:html
fis3 -v
如圖所示說明安裝成功!前端
1)新建web項目node
目錄結構:git
2)fis3配置web
fis3配置文件爲fis-conf.js,它所在的文件目錄爲項目根目錄,例如我這裏新建的項目Test的根目錄爲src。npm
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)的路徑 !!!sass
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文件中,且這兩個文件不須要手動新建,在目錄中也不能查看,直接在網頁源代碼便可看到。