IT工程師數位筆記本

一、插件簡介

將引用的外部資源，如js、css、img等，內嵌到引用它們的文件里去。

二、使用場景

在項目中，出于某些原因，有的時候我們需要將一些資源，比如js腳本內嵌到頁面中去。比如我們的html頁面中有這么段小腳本，如果這么直接發布到
線上，就會多了一個請求，這從性能優化的角度來說是不合理的。

<script src="js/log.js"></script>

那么，我們需要做的事情，就是在項目發布上線前，將這段腳本嵌入到html頁面里去。當然可以手工完成，但維護成本極高。這里可以通過grunt插件來幫我們完成這個工作，只需要一個命令。

grunt inline

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

三、如何使用

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

/index.html
/js/log.js

index.html里引用了log.js

<script src="js/log.js"></script>

1、安裝插件

npm install grunt-inline --save-dev

2、簡單配置

grunt.initConfig({
  inline: {
    demo: {
      src: [ 'index.html' ]
    }
  }
})

3、修改資源引用

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

<script src="js/log.js?__inline"></script>

4、執行任務

grunt inline

運行完上面命令，log.js就會被內嵌到index.html里，生成結果如下所示

<script>
// 這段腳本會被內嵌
var Log = {
    init: function(opt) {
        opt = opt || {};
    }
};
</script>

四、更多用法

grunt-inline 除了用來內聯js文件外，還可以用來內聯css、img文件。除此之外，好支持對內聯的js、css文件進行壓縮。

1、內聯css、img文件

內聯css文件

這里有個小細節，當css文件被內聯進html頁面時，css文件里的圖片路徑也會轉換成相對于html頁面的相對路徑。

<link rel="stylesheet" href="css/main.css?__inline" />

內聯img文件

圖片會被轉成對應的base64字符串后，內聯到頁面

<img src="img/bg.png?__inline" />

2、壓縮js、css文件

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

grunt.initConfig({
  inline: {
    demo: {
      options: {
          cssmin: true, // 壓縮css文件
          uglify: true  // 壓縮js文件
      },
      src: [ 'index.html' ]
    }
  }
});

同樣運行grunt inline任務，這次會看到不一樣的輸出

<script>
var Log={init:function(i){i=i||{}}};
</script>

寫在后面

限于篇幅，這里就只簡單介紹了下grunt inline的簡單使用以及配置，詳細文檔請參考 https://www.npmjs.org/package/grunt-inline

如有問題反饋或建議，可點擊這里 https://github.com/chyingp/grunt-inline/issues?state=open