开发者社区> 程序猿小卡> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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>


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
《扩展 jQuery》——第6章 函数插件 6.1定义插件
基于5.5.2节中描述的本地化方案,这个工具假定相关的JavaScript文件只由它们的语言或地区码来区别。当发生请求时,这个插件以语言和地区码的升序来加载这些文件,每个都覆盖前一个,这样能得到给定的语言和地区的最佳匹配结果。
1286 0
在项目中为scss或less文件启用模块化
一、思考第三方样式表达问题,如何做 二、在项目中启用模块化并同时使用bootstrap
0 0
在项目中为 scss 或 less 文件启用模块化1|学习笔记
快速学习在项目中为 scss 或 less 文件启用模块化1
0 0
在项目中为 scss 或 less 文件启用模块化2|学习笔记
快速学习在项目中为 scss 或 less 文件启用模块化2
0 0
JS:样式转换工具PostCSS使用浏览器前缀插件autoprefixer
JS:样式转换工具PostCSS使用浏览器前缀插件autoprefixer
0 0
JS/JQ常见兼容辅助插件
1.Respond.js   Respond.js 是一个快速、轻量的 polyfill,用于为 IE6-8 以及其它不支持 CSS3 Media Queries 的浏览器提供媒体查询的 min-width 和 max-width 特性,实现响应式网页设计(Responsive Web Design)。
952 0
VSCode使less文件实时转换成css代码【扩展插件(Easy LESS)】
VSCode使less文件实时转换成css代码【扩展插件(Easy LESS)】
0 0
Webpack 开发工具与模块热替换
Webpack 开发工具与模块热替换 ​️ 注意: 永远不要在生产环境中使用这些工具,永远不要。 devtool 当 JavaScript 异常抛出时,你常会想知道这个错误发生在哪个文件的哪一行。
996 0
+关注
程序猿小卡
专注前端技术与架构
文章
问答
文章排行榜
最热
最新
相关电子书
更多
JS 语言在引擎级别的执行过程
立即下载
利用编译将 Vue 组件转成 React 组件
立即下载
低代码开发师(初级)实战教程
立即下载