grunt-inline:一个资源内嵌插件

一、插件简介

将引用的外部资源,如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>

时间: 2024-10-29 11:57:55

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

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

一个物理文件可以直接作为资源内嵌到编译生成的程序集中.借助于EmbeddedFileProvider,我们可以统一的编程方式来读取内嵌于某个程序集中的资源文件,不过在这之前我们必须知道如何将一个项目文件作为资源并嵌入到生成的程序集中. [ 本文已经同步到<ASP.NET Core框架揭秘>之中] 目录 一.将项目文件变成内嵌资源 二.读取资源文件 三.EmbededFileProvider 一.将项目文件变成内嵌资源 在默认情况下,我们添加到一个.NET项目中的静态文件并不会成为项目编译生成的

visual c++-Visual C++中内嵌汇编的问题

问题描述 Visual C++中内嵌汇编的问题 如下,是一个利用内嵌汇编实现的两整数交换的程序.输出结果是2,1;2,1;1,2;2,1.可以看到Swap2这个函数行不通,在函数内两个变量确实交换了,但是调用后a和b没有交换,仍然是2,1.就像是传值一样,而没有传址,令我很困惑. #include <cstdio> void Swap1(int &_int1, int &_int2); void Swap2(int &_int1, int &_int2); in

Makefile所有内嵌函数

一.文本处理函数以下是GNU make内嵌的文本(字符串)处理函数.1       $(subst FROM,TO,TEXT) 函数名称:字符串替换函数-subst. 函数功能:把字串"TEXT"中的"FROM"字符替换为"TO". 返回值:替换后的新字符串. 示例: $(subst ee,EE,feet on the street) 替换"feet on the street"中的"ee"为"E

oracle 中的集合(联合数组 内嵌表 可变数组)

1.定义一个集合,让它作为一个函数或过程的形式参数,这样就可以传递这个集合类型的参数.    看下面的例子:定义一个过程参数--内嵌表                                          create or replace package personnel   --定义一个包  as      type staff_list is table of emp.empno%type;  -- 定义了一个emp.empno 的内嵌表,表的类型为emp_empno.  

Cydia教程:iPhone内嵌音乐均衡器插件调节音效

&http://www.aliyun.com/zixun/aggregation/37954.html">nbsp;   现在很多朋友都喜欢直接在 iOS设备听歌上,当然iPhone本身已可以设定EQ音效, 不过只可选择一系列预设EQ模式: 例如 pop, jazz, vocal, bass等等.这对于一般的朋友来说足够用了,但对于喜欢用iPhone听歌而又对于音效有所追求的用户,这些预设EQ未必能满足需求.下面小编就为大家推荐 一款音效管理插件ipEQ,满足你对于音乐的发烧需求.

关于inline view内嵌视图的学习

看一篇的时候碰巧看到有关inline view的概念,不太熟悉,查了下. 所谓inline view,也叫内前视图,说白了,就是执行的时候才建立的视图.例如select ... from (select ... from (select ...)),这里作为from表来使用的select语句创建的就是一个内嵌视图,个人理解,之所以叫内嵌,就是因为它是放在一个语句中的,而且可以多次嵌套,但这种内嵌视图只能在当前的SQL中使用,不能像CREATE VIEW创建的视图那样重复使用,不是一个实际存在的对

如何能在微信中内嵌一个web页面

问题描述 如何能在微信中内嵌一个web页面 想问一下如何能在微信公众平台中内嵌一个web页面呢?具体方向是什么呢?本人对这个不太懂.想咨询一下

jquery动态添加tab内嵌ifream插件

下载:jquery动态添加tab内嵌ifream插件 http://download.csdn.net/detail/cometwo/9396522

spring-mongodb两层内嵌式数组怎么修改制定最内层的一个属性的值

问题描述 mongodb两层内嵌式数组怎么修改制定最内层的一个属性的值 { "_id" : ObjectId("549127427d3201f5086a711d"), "_class" : "cn.togym.entity.SitePrice", "siteId" : NumberLong(1122), "date" : "2014.3.10", "site