闪闪发光

这是一个 Grunt 插件包装器 资源嵌入器。 。 。 .

将简短的外部脚本和样式表转换为嵌入式脚本 :

• <script src="foo.js"></script> 变成 <script> ... </script>
• <link rel="stylesheet" href="bar.css"> 变成 <style> ... </style>

默认行为是将5KB以下的任何东西嵌入到大小上,但这个阈值是可配置的.

你是否应该嵌入你的脚本? 看情况 嵌入会减少HTTP请求的数量,并可以减少对后续请求和页面渲染的屏蔽,但也意味着资源不能被单独缓存,在页面之间共享.

你该自己量身定做 如果这是你状况好的权衡 但是,作为一个向导:短,在头部被屏蔽的脚本往往是嵌入的好人选.

一个小型的 Modernizer 构建是一个很好的例子:如果它被嵌入(作为您主样式表之前的脚本),它将被执行,并将任何特殊的 CSS 类应用到 <html> 在收到您的样式之前标记。 然后,一旦收到样式,任何随后的背景图像下载都可以立即启动,因为现代izr的班级已经添加到其中了 <html> 标签.

开始

此插件需要 格鲁特 (见 开始) (中文(简体) ).

安装 :

npm install grunt-embed --save-dev

在您的 Grunt 文件中装入任务 :

grunt.loadNpmTasks('grunt-embed');

"嵌入"的任务

概览

在您的 Grunt 文件中, 添加一个名为 embed 输入数据对象 grunt.initConfig()。 。 。 .

grunt.initConfig({
  embed: {
    options: {
      // Task-specific options go here.
    },
    your_target: {
      // Target-specific file lists and/or options go here.
    },
  },
})

选项

任何选项将传递给 resource-embedder - 看到了吗 选项的完整列表。 。 。 .

用法实例

默认选项

在大小( 默认阈值) 5KB 下嵌入任何外部脚本和样式表 :

grunt.initConfig({
  embed: {
    some_target: {
      files: {
        'dest/output.html': 'src/input.html'
      }
    }
  }
})

自定义选项

自定义阈值 — 在大小 3KB 下嵌入任何 :

grunt.initConfig({
  embed: {
    options: {
      threshold: '3KB'
    },
    some_target: {
      files: {
        'dest/output.html': 'src/input.html'
      }
    }
  }
})

覆盖给定脚本/样式表的选项

你用得着 data-embed 属性以覆盖单个资源的选项.

<script src="foo.js" data-embed></script> <!-- always embed -->
<script src="foo.js" data-embed="false"></script> <!-- never embed -->
<script src="foo.js" data-embed="10KB"></script> <!-- embed if under 10KB -->

捐款

取而代之的是正式的样式指南,注意保持现有的编码风格. 为任何新的或已更改的功能添加单位测试 。 使用 格鲁特。 。 。 .

释放历史

(还没有)

许可证

版权 (c) 2013 Callum Locke. 持有麻省理工学院执照.