送干货,实用内联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>  <script type="text/javascript" data-src="./b.js" data-embed>script> 

在我们运行 src/index.html 时,由于第二行

基本上都是依靠 data-embed 属性来灵活控制文件最终的内嵌、去留与否,感觉还是蛮方便的。

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

为什么要内嵌文件到页面?

我在浅谈WEB页面提速 一文中其实有提过,将小块的、复用不高的css、js代码段直接写在页面上有助于减少冗余请求,事实上在走Gzip的情况下 (比如移动端) ,大部分的脚本和样式都可以直接内联到页面上来减少首屏时间 (Gzip压缩率还是很高的)

为什么要按开发模式和构建模式引入两种脚本?

项目需求!项目需求!项目需求!重要的事情说三遍,每个项目都会有一些你可能没意料过的小需求,如我司项目构建时要下载一些变动较高的远程文件再打包处理,如果开发模式直接引入一些可临时替代的文件,可以在构建前就直接在dev文件上做调试和定位问题,有助于提升开发效率。

另外现在很多内嵌插件都不支持远程脚本/样式的下载,如果你有这方面的需求,也可以使用 gulp-embed 哦~

什么?你还不知道gulp是啥?

快看下我的老文章 是时候搁置Grunt,耍一耍gulp了 入门吧!

最后挖下在深圳童鞋们的墙角, 企鹅SNG招聘前端啦 ~有兴趣的娃欢迎把简历投到?641831351@qq.com 哦~面试官人很nice!

周末愉快,共勉~!

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

本站部分文章源于互联网,本着传播知识、有益学习和研究的目的进行的转载,为网友免费提供。如有着作权人或出版方提出异议,本站将立即删除。如果您对文章转载有任何疑问请告之我们,以便我们及时纠正。

PS:推荐一个微信公众号: askHarries 或者qq群:474807195,里面会分享一些资深架构师录制的视频录像:有Spring,MyBatis,Netty源码分析,高并发、高性能、分布式、微服务架构的原理,JVM性能优化这些成为架构师必备的知识体系。还能领取免费的学习资源,目前受益良多

转载请注明原文出处:Harries Blog? ? 送干货,实用内联gulp插件——gulp-embed

赞 (0)
分享到:更多 ()
标签:

热门推荐

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址