资源嵌入器
也可以作为 Grunt 插件 : 闪闪发光
自动将外部脚本和样式表的内容嵌入到 HTML 标记中.
使用 HTML 文件路径并生成修改后标记的字符串。 任何小型外部脚本和样式表被内线所取代 <script>...</script> 或者说 <style>...</style> 要素.
这将减少 HTTP 请求的数量, 以换取夸大您的 HTML 。 由你来决定 这是否是你的好交易.
使用量
npm install resource-embedder
var ResourceEmbedder = require('@anvilco/resource-embedder');
var embedder = new ResourceEmbedder('./app/page.html');
embedder.get(function (markup) {
fs.writeFileSync('./dist/page.html', markup);
});
选择要嵌入的文件
默认, 大小在 5KB以下的任何脚本或样式表 将嵌入。 您可以在选项中更改此设置 .
您也可以使用一个 data-embed 属性.
总是嵌入特定资源,无论文件大小,只要包含属性:
<script src="foo.js" data-embed></script>
<link rel="stylesheet" href="foo.css" data-embed>
为了防止特定脚本被嵌入,设置为 false (或 0:
<script src="foo.js" data-embed="false"></script>
<link rel="stylesheet" href="foo.css" data-embed="false">
仅在某一资源低于一定大小时才嵌入该资源,指定字节的最大数量,或者类似的东西 5KB数字 :
<script src="foo.js" data-embed="2000"></script>
<link rel="stylesheet" href="foo.css" data-embed="5KB">
选项
指定选项:
new ResourceEmbedder('./file.html', options);
...或者仅仅: new ResourceEmbedder(options);
htmlFile——只有当您没有将文件路径作为第一个参数传递给构建者时才需要.assetRoot—— (可选) —— 如果您需要指定相对资源 URL 将被考虑的目录, 请使用此选项 。 (默认为与HTML文件相同的目录. )threshold(默认 :"5KB")——此文件化下的所有资源会被嵌入. NB: 您可以设置为0如果需要,则除标注在资源上的资源外,没有嵌入data-embed属性(见上文).stylesheets(默认 :true)——是否嵌入样式表.scripts(默认 :true)——是否嵌入脚本.deleteEmbeddedFiles(默认 :false) – 嵌入后是否应当删除外部文件.
捐款
取而代之的是正式的样式指南,注意保持现有的编码风格. 为任何新的或已更改的功能添加单位测试 。 使用 格鲁特。 。 。 .
任务
当你在研究一个特定的模块时 src,比如说. parse-file-size.coffee,第一次运行 grunt watch:parse-file-size 在终端,并保持窗口打开。 然后打开 src/parse-file-size.coffee 财务报告和审定财务报表 test/parse-file-size_test.coffee 并肩作战。 当您保存任一文件时, 新的测试结果会出现在终端中 .
你也可以这样 grunt watch 以同时监视所有模块,并随时运行所有测试文件.
释放历史
(还没有)
许可证
版权 (c) 2013 Callum Locke. 持有麻省理工学院执照.
希望列表
- 连接/ 执行中间软件
- 为相对路径指定根的能力,如果与 HTML 文件不同
- 删除
data-embed属性来自不被嵌入的元素,所以不会不必要地丢弃输出标记