一、插件简介
将引用的外部资源，如js、css、img等，内嵌到引用它们的文件里去。
二、使用场景
在项目中，出于某些原因，有的时候我们需要将一些资源，比如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>
