现在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. Selenium通过WebDriver控制IE浏览器出错 Browser zoom level was set to 109%. It should be set to 100%

    错误信息: WebDriverException: Message: Unexpected error launching Internet Explorer. Browser zoom level ...

  2. make: *** [out/host/linux-x86/obj/EXECUTABLES/aidl_intermediates/aidl] 错误 1,make: *** [out/host/linux-x86/obj/lib/libESR_Portable.so] 错误 1

    错误3: g++: g++: selected multilib '32' not installed selected multilib '32' not installed make: *** [ ...

  3. C语言的一些小知识

    注:本文讨论的"C语言"为GNU C,而非ANSI C 标准库 语法 switch语句中的case关键词可以放在任何地方 switch (a) { case 1:; if (b== ...

  4. Python-面向对象

    面向过程变成:函数式变成,C程序等 面向对象编程:C++,Java,Python等   类和对象: 类:是对事物的抽象,比如人类.球类 对象:是类的一个实例,比如足球.篮球   实例说明: 球类可以对 ...

  5. 安装ganglia

    安装ganglia 1.默认已经配置好相关的主机名和Ip地址映射关系 2.默认已经安装好ssh密码登陆 3.默认已经配置好yum源和相关网络配置(如hosts 可在墙外) 4.服务器端安装(除了yum ...

  6. 命名规范（数据库，c#）

    Ⅰ.  Naming Conventions 1. Table Naming Rule 1a ( Prefix) 新加的Table要加上適當的前缀 e.g.  mUsr, eTxn, tmpRolle ...

  7. 十个免费的web应用安全检测工具

    Websites are getting more and more complex everyday and there are almost no static websites being bu ...

  8. 我对 Java 标识符的分类命名方法

    我对 Java 的各种标识符有一套固定的分类方法,以下分享一下我的命名方法以及进行一些说明. # 前缀: 方法 方法:f_doSomeThing().分类词是 f,采自 [f]unction 方法,也 ...

  9. 使用canal分析binlog(一) 入门

    canal介绍 canal是应阿里巴巴存在杭州和美国的双机房部署,存在跨机房同步的业务需求而提出的.早期,阿里巴巴B2B公司因为存在杭州和美国双机房部署,存在跨机房同步的业务需求.不过早期的数据库同步 ...

  10. Linux下不同机器之间拷贝文件

    在Linux系统下,不同机器上实现文件拷贝 一.将本地文件拷贝到远程机器: scp /home/administrator/news.txt root@192.168.6.129:/etc/squid ...