转载

送干货，实用内联gulp插件——gulp-embed

现在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（且内嵌到页面上了）。

送干货，实用内联gulp插件——gulp-embed

找不到适宜的轮子当然只能自行造轮子了，基于 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 属性来灵活控制文件最终的内嵌、去留与否，感觉还是蛮方便的。

送干货，实用内联gulp插件——gulp-embed