送干货,实用内联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(且内嵌到页面上了)。

找不到适宜的轮子当然只能自行造轮子了,基于 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了 入门吧!

 

周末愉快,共勉~!

donate

posted @ 2015-09-19 12:49 vajoy 阅读(...) 评论(...) 编辑 收藏
Copyright © 2014 - 2017 VaJoy Studio