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

二、使用场景

在项目中，出于某些原因，有的时候我们需要将一些资源，比如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