UglifyCSSで簡単にCSS圧縮してみる。おまけつき

  • Pocket
  • このエントリーをはてなブックマークに追加
  • 164 follow us in feedly

まえがき

CSSファイルの改行だったりスペースだったり、不必要なセミコロンなどを取っ払って軽量化したいときに役立つコマンドの紹介です。

今回使用するのは『UglifyCSS』!!

なかなかスペルがややこしく感じてしまいます。

UglifyCSSについて

まずこのUglifyCSSについて

  • コマンドラインでCSSを圧縮する
  • nodejsのライブラリ

そう、今回選んだ理由としては、CUIでnodeのライブラリでnpmを使って簡単に導入できるところです。

yuicompressorとかつかって同じようなことができるようだけどnodeのほうがしっくりくる私なのでこちらを採用。

開発環境

  • node 0.8.22
  • npm 1.2.14
  • uglifycss 0.0.7

UglifyCSSを使うにあたってnodejsとnpmをあらかじめインストールしておく必要があります。↓ 参考程度にどうぞ

node.jsのインストール

node.jsのインストール

インストール

npm installコマンドでさくっと入れちゃいます。-gを付けておくほうがいいと思います。

# sudoは環境に合わせて
> sudo npm install -g uglifycss

# 確認
> npm -g list uglifycss
/Users/username/.nvm/v0.8.22/lib
└── uglifycss@0.0.7

これでインストール完了です

使い方

こんな感じでパイプを使ってファイルを生成します

uglifycss 圧縮前のファイル > 圧縮後のファイル

# sample
uglifycss style.css > style.min.css

圧縮してみた

試しにどんくらいサイズが小さくなるのか試してみました。

uglifycss-1

3/4ぐらいのファイル容量になっちゃいました!!

おまけ

このUglifyCSSだけどコマンドが面倒くさい

何が面倒くさいかって圧縮後のファイル名を指定しないといけないところ。

例えば『style.css』を圧縮したら『style.min.css』てな感じで勝手にファイル名を決めて圧縮ファイルを作成してくれると嬉しい。

なのでシェルスクリプトで作ってみた。シェルスクリプト下手くそなんであれなんですけど。。

cssmin(){
    css=$1
    dir=$2
    min=`echo $css | sed -e 's/\.css/\.min\.css/'`
    if [ $css == $min ]; then
        return
    fi
    if [ $# -ne 2 ]; then
        dir='.'
    fi
    uglifycss $css > "$dir/$min"
}

これをてきとうにbashrcとかで読み込ませる。

こんな感じでコマンドを実行する

cssmin 圧縮前のCSS [ディレクトリ]

#sample

#カレントディレクトリにstyle.min.cssを作成
cssmin style.css

#minディレクトリにstyle.min.cssを作成
cssmin style.css ./min

てな感じでございますん。

おまけ2

最後にもう1こおまけ。

圧縮したCSSを展開したいとき、ここのサイトが便利でした!!Macのアプリ版(有料)もあるみたいです

http://procssor.com/process

http://procssor.com/process

関連記事

250px-Mammouth.png

PHPをcoffeescriptっぽく書ける「Mammouth」を試してみたのでメモ

まえがき PHPのコードをcoffeescriptライクにかけるnod...

記事を読む

npmでYUIDocを使ってみる

YUIDocについて 公式ページ 公式APIドキュメント 環...

記事を読む

no image

シェルスクリプトの基本のおさらい

  まえがき ちょっと作りたいシェルスクリプトがあったので...

記事を読む

fontawesome-1fontawesome-1.png

『FontAwesome』でBootstrapで使えるアイコンを増やす

まえがき 今回は『Font Awesome』を使ってBootstrap...

記事を読む

Redis_Commander__Home.pngRedis_Commander__Home.png

RedisのGUIツール”Redis Commander”がすごい!!

まえがき RedisのGUIツール『RedisCommander』を...

記事を読む

新着記事

no image

PHPでRubyのirbっぽいインタラクティブなスクリプトが実行できる「boris」

まえがき PHPでもRubyのirbみたいなことがしたくて探してみたと...

記事を読む

2015年の抱負と去年の振り返り〜よちよちWEB業界1年経験して〜

まえがき あけましておめでとうございます。今年もどうぞよろしくお願いし...

記事を読む

Java SE 7 Bronze試験(1Z0-802)を受けてきました

まえがき 以前から少し受けてみたかった試験『Java SE 7 Bro...

記事を読む

HubotでJenkinsのジョブを実行する

まえがき HubotをつかってJenkinsのジョブをじっこうしてみた...

記事を読む

no image

Hubotをforeverでデーモン化する

まえがき 今回はHubotをforeverを使ってデーモン化してみた時...

記事を読む

スポンサーリンク

PAGE TOP ↑