node压缩css_Node.js CSS压缩器：clean-css

野性酷女 2023-02-21 15:29 4阅读 0赞

node压缩css

One of my recent finds on the goldmine that is GitHub is [GoalSmasher's account][GoalSmasher_s account]. The GoalSmashers team has created three notable (or at least useful to me) utilities you all should know about:

我最近在金矿上找到的GitHub之一是[GoalSmasher的account][GoalSmasher_s account] 。 GoalSmashers团队创建了三个大家都应该了解的著名(或至少对我有用)的实用程序：

*  [enhance-css][]: embeds imagery into stylesheets via Base64 encoding
    
    [Enhance-CSS][enhance-css] ：通过Base64编码将图像嵌入样式表
 *  [clean-css][]: minifies and concatenates CSS files
    
    [clean-css][] ：缩小并连接CSS文件
 *  [assets-packager][]: builds, minifies, and bundles JavaScript and CSS files in the same command
    
    [asset-packager][assets-packager] ：在同一命令中生成，缩小和捆绑JavaScript和CSS文件

In this post, I'd like to take a few moments to look at clean-css, a CSS dead simple minification package. The clean-css utility does just what you would expect from a CSS minifier: strips unnecessary whitespace, removes comments, deletes the last semicolon of every selector, and more!

在本文中，我想花点时间看一下clean-css，这是一个CSS无效的简单压缩包。 clean-css实用程序可以实现CSS缩小器的预期功能：去除不必要的空格，删除注释，删除每个选择器的最后一个分号等等！

## 安装clean-css **(**Installing clean-css**)** ##

clean-css can be installed via NPM, which is super convenient:

clean-css可以通过NPM安装，这非常方便：

npm install clean-css

You can also simply [check out the source from GitHub][clean-css].

您也可以直接[从GitHub查看源代码][clean-css] 。

## 使用Shell的clean-css **(**Using clean-css from Shell**)** ##

Using clean-css from the shell is simple:

从shell使用clean-css很简单：

cleancss -o style.min.css style.css

You can even use basic shell commands to pass concatenated input in:

您甚至可以使用基本的shell命令在以下位置传递串联的输入：

cat theme.css feature1.css feature2.css feature3.css | cleancss -o features.css

Or chain gzipping as well:

或链式压缩：

cat theme.css feature1.css | cleancss | gzip -9 -c > feature1.css.gz

Compressing via shell commands is super useful for quick manual minfication or intense build processes.

通过shell命令进行压缩对于快速手动压缩或密集的构建过程非常有用。

## 通过NodeJS Apps使用clean-css **(**Using clean-css via NodeJS Apps**)** ##

clean-css can also be used from within your JavaScript code:

clean-css也可以在您JavaScript代码中使用：

# Get the clean-css package
    var cleanCSS = require('clean-css');
    
    # Read in the source of a file or use hard-coded CSS...
    var source = "body { color: red; font-weight: bold; }";
    
    # Minify!
    var minifiedCSS = cleanCSS.process(source);

A huge kudos goes to the GoalSmashers team for their useful utilities, and for open-sourcing them for all of us to use! I have a feeling some of you will be tweaking (or creating) your build process based on their work. Happy optimizing!

对于GoalSmashers团队有用的实用程序，以及将它们开源供我们所有人使用，我们深表感谢！ 我感觉有些人会根据他们的工作来调整(或创建)构建过程。 优化愉快！

> 翻译自: [https://davidwalsh.name/clean-css][https_davidwalsh.name_clean-css]

node压缩css

[GoalSmasher_s account]: https://github.com/GoalSmashers
[enhance-css]: https://github.com/GoalSmashers/enhance-css
[clean-css]: https://github.com/GoalSmashers/clean-css
[assets-packager]: https://github.com/GoalSmashers/assets-packager
[https_davidwalsh.name_clean-css]: https://davidwalsh.name/clean-css