grunt-inline：一個資源内嵌插件

将引用的外部資源，如<code>js</code>、<code>css</code>、<code>img</code>等，内嵌到引用它們的檔案裡去。

在項目中，出于某些原因，有的時候我們需要将一些資源，比如js腳本内嵌到頁面中去。比如我們的html頁面中有這麼段小腳本，如果這麼直接釋出到

線上，就會多了一個請求，這從性能優化的角度來說是不合理的。

那麼，我們需要做的事情，就是在項目釋出上線前，将這段腳本嵌入到html頁面裡去。當然可以手工完成，但維護成本極高。這裡可以通過grunt插件來幫我們完成這個工作，隻需要一個指令。

下面，簡單講解下<code>grunt-inline</code>的配置和使用。這裡假設你對<code>grunt</code>有一定的了解

這裡我們假設項目的目錄結構如下

/index.html /js/log.js

<code>index.html</code>裡引用了<code>log.js</code>

很簡單，加上個<code>__inline</code>标記，告訴插件說這個資源應用是要嵌入到頁面去的

運作完上面指令，<code>log.js</code>就會被内嵌到<code>index.html</code>裡，生成結果如下所示

<code>grunt-inline</code> 除了用來内聯js檔案外，還可以用來内聯css、img檔案。除此之外，好支援對内聯的js、css檔案進行壓縮。

這裡有個小細節，當css檔案被内聯進html頁面時，css檔案裡的圖檔路徑也會轉換成相對于html頁面的相對路徑。

圖檔會被轉成對應的<code>base64</code>字元串後，内聯到頁面

很簡單，加上相應的配置就可以

同樣運作<code>grunt inline</code>任務，這次會看到不一樣的輸出