现在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了 入门吧！

周末愉快，共勉~！

送干货，实用内联gulp插件——gulp-embed的更多相关文章

  1. 利用gulp 插件gulp.spritesmith 完成小图合成精灵图，并自动输出样式文件

    安装依赖 yarn add gulp yarn add gulp.spritesmith 本次依赖的版本是: "gulp": "^3.9.1" "gu ...

  2. gulp插件(gulp-jmbuild)，用于WEB前端构建

    源码地址:https://github.com/jiamao/gulp-jmbuild https://github.com/jiamao/gulp-jmbuild gulp-jmbuild gulp ...

  3. gulp 插件

    原文链接:http://www.mamicode.com/info-detail-517085.html gulp是什么? http://gulpjs.com/ 相信你会明白的! 与著名的构建工具gr ...

  4. gulp插件gulp-usemin简单使用

    关于什么是gulp,它和grunt有什么区别等问题,这里不做任何介绍.本文主要介绍如何使用gulp-usemin这款插件,同时也会简单介绍本文中用到的一些插件. 什么是gulp-usemin 用来将H ...

  5. 将less编译成css的gulp插件

    简介:gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成:使用她,我们不仅可以很愉快的编写代码, ...

  6. Gulp插件笔记

    初次接触Gulp是出于网页模块化的需要,用过之后发现这个任务管理工具有很多实用的插件,意外地好用,于是打算写下这篇笔记把用到的Gulp插件记录一下.至于想了解Gulp基本用法的同学可以去Gulp官网查 ...

  7. 常用 Gulp 插件汇总 —— 基于 Gulp 的前端集成解决方案（三）

    前两篇文章讨论了 Gulp 的安装部署及基本概念,借助于 Gulp 强大的 插件生态 可以完成很多常见的和不常见的任务.本文主要汇总常用的 Gulp 插件及其基本使用,需要读者对 Gulp 有一个基本 ...

  8. gulp插件gulp-ruby-sass和livereload插件

    gulp-ruby-sass是gulp的一个插件,主要是用来实现sass编译,livereload插件主要是实现文件保存时浏览器自动刷新,避免了手动f5的频繁的操作 准备工作:chrome浏览器安装l ...

  9. gulp插件autoprefixer

    gulp的autoprefixer插件可以根据我们的设置帮助我们自动补全浏览器的前缀(如:-moz.-ms.-webkit.-o) 1)首先安装gulp,不知道怎么安装请看这里 2)安装autopre ...

随机推荐

  1. TextView属性android:ellipsize="marquee"不生效的解决办法

    最近自己在写自己的第一个app,过程中遇到了这个问题,查了不少帖子,经过尝试发现,这种问题一般分为两类: 1. TextView的Text值赋值后不更改,很多帖子上说如下写法就可以生效: <Te ...

  2. 用 CallerMemberName Attribute 和 EqualityComparer 统一处理类的属性值变化

    当需要实现类似 INotifyPropertyChanged 这样的接口的时候,每一个属性去判断值是否变化,然后触发事件什么的,太麻烦了,如果能用一个方法统一处理就好了. 好在真的可以做到.这个博文说 ...

  3. java中包的命令行（cmd)操作详解

    一.什么是包? 为了更好地组织类,防止在一个空间下出现类重名,Java提供了包机制.包是类的容器,用于分隔类名空间(类型于C++中的命名空间).如果没有指定包名,所有的示例都属于一个默认的无名包(又称 ...

  4. 学习微信小程序之css7

    盒模型 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...

  5. iterm2

    Mac下配置iterm2 http://www.dreamxu.com/mac-terminal/ 快捷键 http://cnbin.github.io/blog/2015/06/20/iterm2- ...

  6. 一致性hash算法详解

    转载请说明出处:http://blog.csdn.net/cywosp/article/details/23397179     一致性哈希算法在1997年由麻省理工学院提出的一种分布式哈希(DHT) ...

  7. 使用logrotate分割Tomcat的catalina日志

    切割catalian日志的方式有很多种,比如shell脚本的.cronolog或者通过配置log4j等等这些都可以实现.但今天我要介绍是使用logrotate来按日期生成日志. 原文是一个外国博主的文 ...

  8. js get browser vertion (js获取浏览器信息版本)

    1问题:js get browser vertion (js获取浏览器信息版本) 2解决方案 Copy this script into your JavaScript files. It works ...

  9. css3媒体查询实现网站响应式布局

    最常见的办法就是基类(最常用的网站布局)+扩展类(几种不同的网站布局类)来实现不同的布局. <!–使用说明:网站基本布局,使用class="layout";使用ipad访问时 ...

  10. win2003+sql2005配置

    1.安装win2003+sp1 2.安装IIS: a.启用Asp支持(2003 默认安装不安装IIS 6 ,需另外安装.安装完IIS 6,需单独开启ASP支持) 控制面板 -> 管理工具 -&g ...