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

node压缩css

One of my recent finds on the goldmine that is GitHub is 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 。 GoalSmashers团队创建了三个大家都应该了解的著名(或至少对我有用)的实用程序：

enhance-css: embeds imagery into stylesheets via Base64 encoding
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 ：在同一命令中生成，缩小和捆绑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.

您也可以直接从GitHub查看源代码。

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