1. 程式人生 > >HTML5使用fis3引入公共頭部尾部

HTML5使用fis3引入公共頭部尾部

1.安裝node.js。

2.node.js安裝完成之後執行以下命令:

npm install -g fis3

  • -g 安裝到全域性目錄,必須使用全域性安裝,當全域性安裝後才能在命令列(cmd或者終端)找到 fis3 命令
  • 如果 npm 長時間執行無響應,推薦使用 cnpm 來安裝
3.安裝完成後執行 fis3 -v 判斷是否安裝成功,如果安裝成功,則顯示類似如下資訊:
$ fis3 -v

 [INFO] Currently running fis3 (/Users/Your/Dev/fis3/dev/fis3)

  v3.0.0

   /\\\\\\\\\\\\\\\  /\\\\\\\\\\\     /\\
\\\\\\\\\ \/\\\/////////// \/////\\\/// /\\\/////////\\\ \/\\\ \/\\\ \//\\\ \/// \/\\\\\\\\\\\ \/\\\ \////\\\ \/\\\/////// \/\\\ \////\\\ \/\\\ \/\\\ \////\\\ \/\\\ \/\\\ /\\\ \//\\\ \/\\\ /\\\\\\\\
\\\ \///\\\\\\\\\\\/ \/// \/////////// \///////////

最後使用以下方法引入公共部分:

1、html中嵌入圖片:

<img title="百度logo" src="images/logo.gif?__inline"/>

編譯後:

<img title="百度logo" src="data:image/gif;base64,R0lGODlhDgGBALMAAGBn6eYxLvvy9PnKyfO...Jzna6853wjKc850nPeoYgAgA7"/>

2、html中嵌入樣式檔案:

<link rel="stylesheet"

type="text/css" href="demo.css?__inline">

編譯後:

<style>img { border: 5px solid #ccc; }</style>

3、html中嵌入指令碼資源:

<script type="text/javascript" src="demo.js?__inline"></script>

編譯後:

<script type="text/javascript">console.log('inline file');</script>

4、html中嵌入頁面檔案:

<linkrel="import"href="demo.html?__inline">

編譯後:

<h1>demo.html content</h1>