在 Node.js 中将 html 和 CSS 缩小到一行

Posted 2023-03-07

【中文标题】在 Node.js 中将 html 和 CSS 缩小到一行

【英文标题】：Minifying html and CSS onto a single line in Node.js

【发布时间】：2019-10-29 02:39:43

【问题描述】：

是否有可以将 html 和 css 压缩为一行的模块或 gulp 选项？

例如

<style media='screen' type='text/css'>
    .text 
        padding: 1px 1px 1px 1px;
        font-size: 12px;
    
</style>

<!-- now for html -->

<div style='width:550px;' >
    <div style='float:left;font-size:1.2em;' class='text'>
        Title goes here
    </div>
    <div style='width:60px;float:left;' class='text'>
        <span style='font-size:0.8em;'>
            ®
        </span>
    </div>
    <div style='float:left' class='text'>
        Some paragraph text
    </div>
    <div style='float:left;padding-top:10px;' class='text'>
        <span style='font-style:italic;'>
            A footer to the paragraph
        </span>
    </div>
</div>

能否使用 node.js 将上面的我缩小到单行，使其看起来像下面这样。

<style media='screen' type='text/css'>.text padding: 1px 1px 1px 1px;font-size:12px;</style><!-- now for html --><div style='width:550px;' >  <div style='float:left;font-size:1.2em;' class='text'>MY BRILLIANCE</div><div style='width:60px;float:left;' class='text'>      <span style='font-size:0.8em;'>®</span> </div>  <div style='float:left' class='text'>       With release comes growth, through challenge comes wisdom, let us show you the way. </div>  <div style='float:left;padding-top:10px;' class='text'><span style='font-style:italic;'>Absolute Equal Acceptance through Thought, Conscience and Reunion.</span></div></div>

【问题讨论】：

只是一个警告：这可能不会给你任何性能/压缩方面的提升，但也许这不是你这样做的原因......

@oligofren 我正在构建一个小工具需要它

【参考方案1】：

尽量分开保存 HTML 文件和 CSS 文件。并学习 SASS。学习 SASS 之后，你会想，“我为什么要使用 CSS”。使用 SASS，您将能够缩小 CSS。 转到https://sass-lang.com/install 并下载“Prepros”。还有一个免费版本，只需下载并安装即可。

【讨论】：

我只需要为我正在构建的一个小工具执行此操作

【参考方案2】：

var minify = require("html-minifier").minify;

var html = `<style media='screen' type='text/css'>
.text 
    padding: 1px 1px 1px 1px;
    font-size: 12px;

</style>

<!-- now for html -->

<div style='width:550px;' >
<div style='float:left;font-size:1.2em;' class='text'>
    Title goes here
</div>
<div style='width:60px;float:left;' class='text'>
    <span style='font-size:0.8em;'>
        ®
    </span>
</div>
<div style='float:left' class='text'>
    Some paragraph text
</div>
<div style='float:left;padding-top:10px;' class='text'>
    <span style='font-style:italic;'>
        A footer to the paragraph
    </span>
</div>
</div>`;

var result = minify(html, 
  collapseWhitespace: true,
  minifyCSS: true,
  quoteCharacter: "'"
);

console.log(result);

输出

<style media='screen' type='text/css'>.textpadding:1px 1px 1px 1px;font-size:12px</style><!-- now for html --><div style='width:550px'><div style='float:left;font-size:1.2em' class='text'>Title goes here</div><div style='width:60px;float:left' class='text'><span style='font-size:.8em'>®</span></div><div style='float:left' class='text'>Some paragraph text</div><div style='float:left;padding-top:10px' class='text'><span style='font-style:italic'>A footer to the paragraph</span></div></div>

【参考方案3】：

有一个非常流行的包叫做html-minifier。

网站上的一个小例子：

var minify = require('html-minifier').minify;
var result = minify('<p title="blah" id="moo">foo</p>', 
  removeAttributeQuotes: true
);
result; // '<p title=blah id=moo>foo</p>'