情報アイランド

「情報を制する者は世界を制す」をモットーに様々な情報を提供することを目指すブログです。現在はプログラミング関連情報が多めですが、投資関連情報も取り扱っていきたいです。

Node.jsでCSSをminifyする

2017/05/16

CSSをminifyするにはpretty-dataモジュールのprettyData.pd.cssmin関数やcsswringモジュールのcsswring.wring関数を使用します。

prettyData.pd.cssmin関数

var prettyData = require('pretty-data');

var css = prettyData.pd.cssmin('xxx', true);

第1引数にCSSを指定します。

第2引数にCSSのコメントを除去しないかを真偽値として指定します。

返り値としてminifyされたCSSが得られます。

csswring.wring関数

var csswring = require('csswring');

var css = csswring.wring('xxx', {
    preserveHacks: false, 
    removeAllComments: false
}).css;

第1引数にCSSを指定します。

第2引数にオプションをオブジェクトとして指定します。この引数は指定しなくても構いません。

オプションには下のようなものがあります。

  • preserveHacks・・・CSSハックを除去しないかを真偽値として指定します。デフォルトはfalseです。
  • removeAllComments・・・全てのコメントを除去するかを真偽値として指定します。デフォルトはfalseです。

返り値としてオブジェクトが得られます。このオブジェクトのcssプロパティにminifyされたCSSが格納されています。

サンプルコード1

prettyData.pd.cssmin関数の使用例です。

pretty-data-css-min.js

var prettyData = require('pretty-data');

var css = `
* {
    font-family: Avenir, "Open Sans", "Helvetica Neue", Helvetica, Verdana, Arial, Roboto, "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
    margin: 0px;
    padding: 0px;
}

a:hover img {
    opacity: 0.8;
}

a:visited {
    color: #0000ee;
}

body {
    background: #f2f2f2;
}
`;

console.log(prettyData.pd.cssmin(css));

使用パッケージ

  • pretty-data
    npm install pretty-dataでインストールします。

実行結果

C:\work\node>node pretty-data-css-min.js
 * {font-family: Avenir, "Open Sans", "Helvetica Neue", Helvetica, Verdana, Arial, Roboto, "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;margin: 0px;padding: 0px;}a:hover img {opacity: 0.8;}a:visited {color: #0000ee;}body {background: #f2f2f2;}

サンプルコード2

csswring.wring関数の使用例です。

csswring-wring.js

var csswring = require('csswring');

var css = `
* {
    font-family: Avenir, "Open Sans", "Helvetica Neue", Helvetica, Verdana, Arial, Roboto, "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
    margin: 0px;
    padding: 0px;
}

a:hover img {
    opacity: 0.8;
}

a:visited {
    color: #0000ee;
}

body {
    background: #f2f2f2;
}
`;

console.log(csswring.wring(css).css);

使用パッケージ

  • CSSWring
    npm install csswringでインストールします。

実行結果

C:\work\node>node csswring-wring.js
*{font-family:Avenir,Open Sans,Helvetica Neue,Helvetica,Verdana,Arial,Roboto,"游ゴシック",Yu Gothic,"游ゴシック体",YuGothic,"ヒラギノ角ゴ Pro W3",Hiragino Kaku Gothic Pro,Meiryo UI,"メイリオ",Meiryo,"MS Pゴシック",MS PGothic,sans-serif;margin:0;padding:0}a:hover img{opacity:.8}a:visited{color:#00e}body{background:#f2f2f2}

関連

pizyumi
プログラミング歴19年のベテランプログラマー。業務システム全般何でも作れます。現在はWeb系の技術を勉強中。
スポンサーリンク

-Node.js