現在npm上有很多gulp內聯工具，用於把腳本和樣式內嵌到HTML頁面上，之前搞項目我也在這些插件中尋覓許久，但均不滿足公司項目的一個需求—— HTML上同時插入了開發（dev版，src文件夾下，比如 src/index.html）和gulp處理后（build版，dest文件夾下,比如 dest/index.html）的兩種版本的腳本，要求運行src文件夾下的該頁面時，能忽略掉引入的build版的腳本（比如src/a.js）；而在運行dest文件夾下的該頁面時，能忽略的引入的dev版的腳本（比如dest/b.js）。
事實上解決該問題的方案挺簡單，比如往 src/index.html 插入這段代碼：
<script type="text/javascript" src="./a.js" data-embed="disable"></script> <!-- gulp處理時將其移除 --> <script type="text/javascript" data-src="./b.js" data-embed></script> <!-- gulp處理時將其內聯到頁面 -->
在我們運行 src/index.html 時，由於第二行<script> 中是以 data-src 而非 src 的形式來引用腳本，故它是不會被執行處理的。
然后我們需要有一款工具，在gulp構建時，把頁面上帶有 data-embed="disable" 屬性的，比如第一條<script>，將其從構建后的html頁面（dest/index.html）上移除掉，另將帶有 data-embed 屬性的，比如第二條<script>上的 data-src 更變為 src，並將對應腳本內嵌到頁面上。
這樣一來 src/index.html 就只會執行 src/a.js，而 dest/index.html 就只會執行 dest/b.js（且內嵌到頁面上了）。
找不到適宜的輪子當然只能自行造輪子了，基於 resource-embedder 我折騰了這款 gulp-embed ，除了支持 resource-embedder 默認的參數（建議去github看，這里不贅述），相比其它內聯插件還支持我上述的解決方案（不止腳本，樣式也支持），另外還支持遠程文件（下載成功后內聯到頁面）。
安裝方法
自然是常規的npm安裝形式：
npm install --save-dev gulp-embed
使用示例
gulpfile配置：
gulp.task('embed', function () {
gulp.src('./src/*.html')
.pipe(embed())
.pipe(gulp.dest('./dest/'));
});
html頁面：
<!doctype html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>demo</title>
<link rel="stylesheet" href="css/a.css" data-embed /> <!-- 構建后會內聯到頁面上 -->
<link rel="stylesheet" href="css/b.css" data-embed="false" /> <!-- 構建后不會內聯到頁面上 -->
</head>
<body>
<div id="container"></div>
<textarea id="debug" cols="100" rows="30"></textarea>
<script type="text/javascript" data-src="./js/a.js" data-embed></script> <!-- 構建后會內聯到頁面上，即使使用了data-src屬性 -->
<script type="text/javascript" src="./js/b.js" data-embed="disable"></script><!-- 構建后會從頁面上移除 -->
</body>
</html>
基本上都是依靠 data-embed 屬性來靈活控制文件最終的內嵌、去留與否，感覺還是蠻方便的。
為什么要內嵌文件到頁面？
我在 淺談WEB頁面提速 一文中其實有提過，將小塊的、復用不高的css、js代碼段直接寫在頁面上有助於減少冗余請求，事實上在走Gzip的情況下（比如移動端），大部分的腳本和樣式都可以直接內聯到頁面上來減少首屏時間（Gzip壓縮率還是很高的）。
為什么要按開發模式和構建模式引入兩種腳本？
項目需求！項目需求！項目需求！重要的事情說三遍，每個項目都會有一些你可能沒意料過的小需求，如我司項目構建時要下載一些變動較高的遠程文件再打包處理，如果開發模式直接引入一些可臨時替代的文件，可以在構建前就直接在dev文件上做調試和定位問題，有助於提升開發效率。
另外現在很多內嵌插件都不支持遠程腳本/樣式的下載，如果你有這方面的需求，也可以使用 gulp-embed 哦~
什么？你還不知道gulp是啥？
快看下我的老文章 是時候擱置Grunt，耍一耍gulp了 入門吧！
周末愉快，共勉~！
