现在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. Ueditor之前后端源码的学习和简单的研究

    这是我的项目目录 这里写图片描述 1.从访问路径http://localhost:8081/Test/_examples/simpleDemo.html,我们主要是要看看,富文本框被加载出来之前,会调 ...

  2. SQL Server 得到数据库中所有表的名称及数据条数

    --方法一if exists ( select * from dbo.sysobjects where id = object_id(N'[dbo].[TableSpace]') and object ...

  3. 进击的Python【第十章】：Python的socket高级应用（多进程，协程与异步）

    Python的socket高级应用(多进程,协程与异步)

  4. Nginx配置文件nginx.conf中文详解

    #定义Nginx运行的用户和用户组user www www; #nginx进程数,建议设置为等于CPU总核心数.worker_processes 8; #全局错误日志定义类型,[ debug | in ...

  5. POJ 3347 Kadj Squares （计算几何+线段相交）

    题意:从左至右给你n个正方形的边长,接着这些正方形都按照旋转45度以一角为底放置坐标轴上,最左边的正方形左端点抵住y轴,后面的正方形依次紧贴前面所有正方形放置,问从上方向下看去,有哪些正方形是可以被看 ...

  6. Linux usual cmd

    日常工作时常需要用到,在此备份一下: <1> top命令 第一行:当前系统时间为23:31:59,系统已经运行了127天又19小时47分钟,当前系统只要一个用户即root,load ave ...

  7. 【刷题笔记】I'm stuck! (迷宫)-----java方案

    题目描述 : 给定一个R行C列的地图,地图的每一个方格可能是'#', '+', '-', '|', '.', 'S', 'T'七个字符中的一个,分别表示如下意思: '#': 任何时候玩家都不能移动到此 ...

  8. Theano 学习笔记(一)

    Theano 学习笔记(一) theano 为什么要定义共享变量? 定义共享变量的原因在于GPU的使用,如果不定义共享的话,那么当GPU调用这些变量时,遇到一次就要调用一次,这样就会花费大量时间在数据 ...

  9. 【SAP BO】处理掉BOE打开Xcelsius报表时，外围出现的外边框(转)

    原帖地址:http://blog.csdn.net/liyi199488/article/details/8943286 通过BOE打开Xcelsius报表时,总是出现一个外边框. 处理办法: Xce ...

  10. [BZOJ1562][NOI2009] 变换序列

    Description Input Output Sample Input 5 1 1 2 2 1 Sample Output 1 2 4 0 3 HINT 30%的数据中N≤50:60%的数据中N≤ ...