FIS3項目構建

概述

FIS3採起了相似CSS語法同樣的配置風格,易於理解與上手。FIS3 是面向前端的工程構建工具。解決前端工程中性能優化、資源加載(異步、同步、按需、預加載、依賴管理、合併、內嵌)、模塊化開發、自動化工具、開發規範、代碼部署等問題。

詳細

1、安裝fis3(確保已經安裝了node)

執行cmd命令:css

npm install -g fis3

安裝完成後,測試是否安裝成功,輸入命令:html

fis3 -v

image.png

如圖所示說明安裝成功!前端

2、新建項目(此處我以Hbuilder開發工具爲例)

1)新建web項目node

目錄結構:git

image.png

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

保存該文件,之後修改文件以前先雙擊該程序,如圖,每次修改後保存文件,該程序自動記錄修改時間,並啓動網頁即時刷新。請勿關閉該窗口 !!!

image.png

4)項目發佈

源代碼是不能直接發佈到服務器上的,因此須要經過fis3來從新發布一下。

具體步驟以下:

在release.bat文件中添加以下命令:

fis3 release -d ../output

意思是:將根目錄下的全部文件發佈到output 文件夾中,此處../output應和src在同一目錄下。

tips:前面配置文件fis-conf.js中已經被忽略的文件不被髮布 !!!

保存release.bat文件,發佈項目時,雙擊該程序便可。

image.png

5)測試

以上5步完成fis3配置,接下來咱們來一塊兒測試一下是否起做用~~~

如圖,先新建這些文件:

image.png

在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

image.png

網頁自動打開:

image.png

此時修改並保存html文件或者scss文件都能看到此網頁自動刷新,且dev.bat有修改時間記錄。

說明咱們的自動刷新功能配置成功!

打開網頁源代碼,找到app.min.css文件,點擊打開:

如圖則說明fis-conf.js中的css部分配置成功!

image.png

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,點擊打開,如圖:

image.png

成功!

說明咱們的fis-conf.js文件配置成功,之後全部新建的scss文件和js文件都會被轉換壓縮到app.min.css和app.min.js文件中,且這兩個文件不須要手動新建,在目錄中也不能查看,直接在網頁源代碼便可看到。

 

 

 

 

注:本文著做權歸做者,由demo大師發表,拒絕轉載,轉載須要做者受權

相關文章
相關標籤/搜索