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

最新推荐文章于 2022-04-26 08:24:12 发布

转载最新推荐文章于 2022-04-26 08:24:12 发布 · 131 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/chyingp/p/intro-of-grunt-inline.html

本文介绍Grunt Inline插件的使用方法，该插件能将外部资源如JS、CSS、IMG等内嵌到引用文件中，提高网页加载速度。文章详细讲述了插件的安装、配置及使用步骤，并展示了如何通过标记内联不同类型的资源。

一、插件简介

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

写在后面

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

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

转载于:https://www.cnblogs.com/chyingp/p/intro-of-grunt-inline.html