现在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 插入这段代码：

  1. <script type="text/javascript" src="./a.js" data-embed="disable"></script> <!-- gulp处理时将其移除 -->
  2. <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配置：

  1. gulp.task('embed', function () {
  2.     gulp.src('./src/*.html')
  3.         .pipe(embed())
  4.         .pipe(gulp.dest('./dest/'));
  5. });

html页面：

  1. <!doctype html>
  2. <html lang="en-US">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>demo</title>
  6.     <link rel="stylesheet" href="css/a.css"  data-embed /> <!-- 构建后会内联到页面上 -->
  7.     <link rel="stylesheet" href="css/b.css"  data-embed="false" /> <!-- 构建后不会内联到页面上 -->
  8. </head>
  9. <body>
  10.     <div id="container"></div>
  11.     <textarea id="debug" cols="100" rows="30"></textarea>
  12.     <script type="text/javascript" data-src="./js/a.js" data-embed></script> <!-- 构建后会内联到页面上，即使使用了data-src属性 -->
  13.     <script type="text/javascript" src="./js/b.js" data-embed="disable"></script><!-- 构建后会从页面上移除 -->
  14. </body>
  15. </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. QT编译时 cc1plus进程占用大量内存卡死问题解决

    QT5.7 做一个demo编译时,内存几乎完全消耗,卡死.经尝试发现是添加资源文件过大导致(不知是单个文件过大触发还是文件总共过大触发)的.我的资源文件工136M,单个最大是125M左右. 解决方法是 ...

  2. 剑指Offer-【面试题06：重建二叉树】

    package com.cxz.question6; /* * 输入某二叉树的前序遍历和中序遍历的结果,请重建出该二叉树.假设输入的前序遍历和中序遍历的结果中都不含重复的数字. * 例如:前序遍历序列 ...

  3. 4 Best Time to Buy and Sell Stock III_Leetcode

    Say you have an array for which the ith element is the price of a given stock on day i. Design an al ...

  4. Aspx页面模拟WebService功能

    在后台引入 using System.Web.Services 命名空间 然后在编写web服务方法: [WebMethod] public static string GetData(string t ...

  5. webform Repeater、地址栏传值、Response

    Repeater: 重复器 Repeater中有五个模板,这里需要注意的是4个 <HeaderTemplate> - 开头,只执行一次的内容 <ItemTemplate> - ...

  6. 前端弹出层框架layer

    http://www.layui.com/doc/modules/layer.html#layer.confirm

  7. linux中安装mysql数据库

    遇到ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/var/lib/mysql/mysql.sock' ...

  8. Python os模块介绍

    os.getcwd() 获取当前工作目录,即当前python脚本工作的目录路径 os.chdir("dirname") 改变当前脚本工作目录:相当于shell下cd os.curd ...

  9. JS(去掉前后空格或去掉所有空格)的用法

    1.  去掉字符串前后所有空格: 代码如下: function Trim(str) { return str.replace(/(^\s*)|(\s*$)/g, ""); } 说明 ...

  10. .NET静态变量与静态方法并发的问题

    我们知道,静态变量与静态方法都是在程序编译的时候就定义好了的,并且不会存在多个副本.所以对于静态变量来说,一旦修改了就会影响全局. 因此,静态变量是存在并发性问题的,所以当我们在操作静态变量的时候需要 ...