一、插件简介

将引用的外部资源,如jscssimg等,内嵌到引用它们的文件里去。

二、使用场景

在项目中,出于某些原因,有的时候我们需要将一些资源,比如js脚本内嵌到页面中去。比如我们的html页面中有这么段小脚本,如果这么直接发布到
线上,就会多了一个请求,这从性能优化的角度来说是不合理的。

<script src="js/log.js"></script>

那么,我们需要做的事情,就是在项目发布上线前,将这段脚本嵌入到html页面里去。当然可以手工完成,但维护成本极高。这里可以通过grunt插件来帮我们完成这个工作,只需要一个命令。

grunt inline

下面,简单讲解下grunt-inline的配置和使用。这里假设你对grunt有一定的了解

三、如何使用

这里我们假设项目的目录结构如下

/index.html
/js/log.js

index.html里引用了log.js

<script src="js/log.js"></script>

1、安装插件

npm install grunt-inline --save-dev

2、简单配置

grunt.initConfig({
inline: {
demo: {
src: [ 'index.html' ]
}
}
})

3、修改资源引用

很简单,加上个__inline标记,告诉插件说这个资源应用是要嵌入到页面去的

<script src="js/log.js?__inline"></script>

4、执行任务

grunt inline

运行完上面命令,log.js就会被内嵌到index.html里,生成结果如下所示

<script>
// 这段脚本会被内嵌
var Log = {
init: function(opt) {
opt = opt || {};
}
};
</script>

四、更多用法

grunt-inline 除了用来内联js文件外,还可以用来内联css、img文件。除此之外,好支持对内联的js、css文件进行压缩。

1、内联css、img文件

内联css文件

这里有个小细节,当css文件被内联进html页面时,css文件里的图片路径也会转换成相对于html页面的相对路径。

<link rel="stylesheet" href="css/main.css?__inline" />

内联img文件

图片会被转成对应的base64字符串后,内联到页面

<img src="img/bg.png?__inline" />

2、压缩js、css文件

很简单,加上相应的配置就可以

grunt.initConfig({
inline: {
demo: {
options: {
cssmin: true, // 压缩css文件
uglify: true // 压缩js文件
},
src: [ 'index.html' ]
}
}
});

同样运行grunt inline任务,这次会看到不一样的输出

<script>
var Log={init:function(i){i=i||{}}};
</script>

写在后面

限于篇幅,这里就只简单介绍了下grunt inline的简单使用以及配置,详细文档请参考 https://www.npmjs.org/package/grunt-inline

如有问题反馈或建议,可点击这里 https://github.com/chyingp/grunt-inline/issues?state=open

grunt-inline:一个资源内嵌插件的更多相关文章

  1. .NET Core的文件系统[4]:由EmbeddedFileProvider构建的内嵌(资源)文件系统

    一个物理文件可以直接作为资源内嵌到编译生成的程序集中.借助于EmbeddedFileProvider,我们可以统一的编程方式来读取内嵌于某个程序集中的资源文件,不过在这之前我们必须知道如何将一个项目文 ...

  2. Beennan的内嵌汇编指导(译)Brennan's Guide to Inline Assembly

    注:写在前面,这是一篇翻译文章,本人的英文水平很有限,但内嵌汇编是学习操作系统不可少的知识,本人也常去查看这方面的内容,本文是在做mit的jos实验中的一篇关于内嵌汇编的介绍.关于常用的内嵌汇编(AT ...

  3. 由EmbeddedFileProvider构建的内嵌(资源)文件系统

    由EmbeddedFileProvider构建的内嵌(资源)文件系统 一个物理文件可以直接作为资源内嵌到编译生成的程序集中.借助于EmbeddedFileProvider,我们可以统一的编程方式来读取 ...

  4. 『Asp.Net 组件』Asp.Net 服务器组件 内嵌JS:让自己的控件动起来

    代码: using System; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; namespace ...

  5. 《Programming WPF》翻译 第3章 3.内嵌控件

    原文:<Programming WPF>翻译 第3章 3.内嵌控件 WPF提供了一系列内嵌控件.其中大多数符合标准的你已经熟悉的Windows控件类型.注意到没有一个是包装在旧的Win32 ...

  6. OD 实验(十四) - 内嵌补丁

    内嵌补丁(inline patch): 内嵌补丁指在程序文件中把补丁代码写入文件里面达到破解的目的 如果修改某行语句会影响后面的语句,例如某语句占用 3 个字节,修改完变为 5 个字节,会覆盖后面的语 ...

  7. [ASP.NET Core 3框架揭秘] 文件系统[4]:程序集内嵌文件系统

    一个物理文件可以直接作为资源内嵌到编译生成的程序集中.借助于EmbeddedFileProvider,我们可以采用统一的编程方式来读取内嵌的资源文件,该类型定义在 "Microsoft.Ex ...

  8. Makefile所有内嵌函数

    一.文本处理函数以下是GNU make内嵌的文本(字符串)处理函数.1       $(subst FROM,TO,TEXT) 函数名称:字符串替换函数—subst. 函数功能:把字串“TEXT”中的 ...

  9. lumisoft.net 邮件管理系列文章 - 如何判断附件为内嵌式还是附加式

    如果要区分邮件里面的附件是内嵌图片附件还是真正的附件,那么可以通过下面代码进行判断,如果是MIME_DispositionTypes.Attachment的就是普通附件,MIME_Dispositio ...

随机推荐

  1. Python中则正则表达式

    http://blog.csdn.net/carolzhang8406/article/details/6335072 http://www.iteedu.com/plang/python/pyred ...

  2. [Python_3] Python 函数 & IO

    0. 说明 Python 函数 & IO 笔记,基于 Python 3.6.2 参考  Python: read(), readline()和readlines()使用方法及性能比较  Pyt ...

  3. 一、JSP九大内置对象 二、JAVAEE三层架构和MVC设计模式 三、Ajax

    一.JSP九大内置对象###<1>概念 不需要预先申明和定义,可以直接在jsp代码中直接使用 在JSP转换成Servlet之后,九大对象在Servlet中的service方法中对其进行定义 ...

  4. ndroid动态创建按钮并添加事件

    public class MyActivity extends Activity { /** * Called when the activity is first created. */ @Over ...

  5. AngularJS 中<a> 超链接标签不起作用?

    开始时遇到个问题,单页应用<a>元素链接点击就是不跳转页面,使用超链接标签<a href='group'>click</a> 不起作用. 解决方法: 如果你不巧配置 ...

  6. sql注入--access

    access数据库结构: 表名  -->  列名  -->  数据 access注入攻击片段 联合查询法: (1)  判断注入点:  ?id=1 and 1=1 ; ?id=1 and 1 ...

  7. yaml格式

    yaml中允许表示三种格式,分别为常量值.对象和数组 例如: 其中#作为注释,yaml中只有行注释 基本格式要求: 1.大小写敏感:2.使用缩进代表层级关系: 3.缩进只能使用空格,不能使用tab键, ...

  8. kali 2016.2安装及配置

    之前安装过kali,现在换了台电脑重新安装一遍,顺便记录下来,因为面向新手所以会很详(luo)细(suo) 安装: 首先到官网去下载镜像文件:https://www.kali.org/download ...

  9. Ubuntu16.04安装Zabbix3.2(快速安装教程)

    ubuntu16.04下zabbix安装和配置 上面这篇虽然是一样的,但是针对的版本有差异,版本差异,安装方式也就有差异,对要求的环境可能有所不同. 今天帮同事安装zabbix,按照如下几个步骤,就完 ...

  10. Python2.7-xdrlib

    xdrlib模块,用于打包和解包 xdr 数据.XDR 提供了一种与体系结构无关的表示数据,解决了数据字节排序的差异.数据字节大小.数据表示和数据对准的方式.使用XDR的应用程序,可以在异构硬件系统上 ...