如何在 Demandware 中删除 HTML 源代码中的空格

我正在需求软件平台上工作。我在源代码（HTML）中得到了太多的空间。我不知道如何优化它，请帮助我。

提前致谢

我们对最终结果的控制有限，但是有 iscontent 标签，它有一个属性紧凑。

<iscontent type="text/html" compact="true" />

请注意，此标记不会筛选到包含的模板。每个包含的模板都需要自己的 iscontent 标记来压缩空格。 Demandware指出，紧凑可能会破坏标签的布局，如<pre>，所以要小心。

取决于"优化"的含义。如果您只是想减小下载大小，那么最好在 Web 服务器上启用 Gzip 压缩，因为它会将空格所需的数据折叠到几乎为零，此外还会压缩其余的标记。如果您有其他原因，请详细说明。例如，如果您希望源代码出于调试/开发目的而"干净"，那么您可以使用客户端的源代码清理器（即Firefox插件或HTMLTidy接口）获得相同的结果。

源代码中的本地包含似乎存在问题，留下多个空白行。Modules.isml 可能特别令人反感。将紧凑设置为"true"无济于事。

我最近将@sholsinger的答案与Demandware/SFCC构建套件相结合，后者使用grunt而不是gulp来解决这个问题。

基础知识如下所示：

将 grunt-contrib-htmlmin 添加到 task_loader.js 和 package.json 并运行 npm install。

在grunt/config中添加了htmlmin.js。

module.exports = {
minify: {
    options: {
        removeComments: true,
        collapseWhitespace: true
    },
    files: {
        '<%= dw_properties.folders.code %>app_core/cartridge/templates/default/util/modules.isml': '<%= dw_properties.folders.code %>app_core/cartridge/templates/default/util/modules.isml',  
    }
}
}

然后将其添加到alises.yaml：'htmlmin：minify'

如果您使用 Demandware 的构建套件，则可以在构建过程中将其连接空格。

可以在此处找到有关生成套件的信息：https://bitbucket.org/demandware/build-suite（专用存储库）

> Moku 已成功使用 html-minifier 包来压缩模板文件以删除 sheplers.com 上的空格。我们将其添加到基于Site Genesis构建脚本的gulp过程中。（约2015年底）由于我们使用gulp，我们使用了gulp包装器包gulp-htmlmin。吞咽任务如下所示：

gulp.task('isml', function() {
    var htmlminOptions = {
    collapseWhitespace: true,
    includeAutoGeneratedTags: false
    };
    paths.isml.forEach(function(p) {
        gulp.src(path.join(rootPath, p), { base: './' })
            .pipe(htmlmin(htmlminOptions))
            .pipe(gulp.dest('./'));
    });
});

isml的package.json路径指令如下所示。请注意，您可以将任何生成过多空格的 ISML 文件添加到此列表中，但我们发现大多数有问题的空格都是由这个文件单独生成的。

"isml" : [
  "app_storefront_core/cartridge/templates/default/util/modules.isml"
]

我假设您正在使用他们的Demandware Commerce或他们的其他服务。由于他们为其电子商务网站提供了所有后端代码，因此您极不可能淡化他们的"空白"。如果您在他们自己的主页上查看源代码，您还将看到大量额外的"空格"。这只是他们内容管理系统的产物。

您只是担心页面的额外开销（文件大小）还是有其他担忧？

相关内容

最新更新

热门标签：