超便利すぎて泣けてきた。。。SublimeTextのプラグイン⇒YUI Compressorでファイル圧縮

カテゴリー︎: 【SublimeText 3】

webサイトをコーディングする際のテキストエディタはSublimeText3を使っています。

 

「YUI compressor」に出会う前までは、webサイトのデータをクライアントに納品する際に、
 

CSS、JavaScriptコード内の余計な、改行・コメントを手作業で削除していました。
 
もしもCSS、JavaScriptのファイルが100ファイル以上あるとしたら、、、
 

結構な時間がかかります。。。
 
そして疲れますよね。。。
 
そこで

 

CSSとJavaScriptのファイル圧縮⇒YUI Compressorを使ってみた。

 

YUI Compressorの実行結果

 
(例)
 
元ファイルとして、common_set.cssがあります。
 
SublimeTextに「YUI compressor」をインストールして

 
common_set.cssをSublimeTextで開いた状態で
 

command + B

を押した瞬間
 
↓common_set.min.cssが書き出された!

 
common_set.min.cssが書き出される時間⇒約0.5秒
 

便利すぎて泣けてきた。。。

 

これでCSS、JavaScriptのファイルが100ファイルあったとしても、、、
 
約0.5秒 × 100ファイル = 約50秒です!
 
ざっくり計算ですが、手作業よりも確実に時間短縮できます!
 
ファイル名に「.min」が入っているファイルは圧縮してあるということです。
 

JavaScriptファイルでも同様に圧縮すると「.min」となります。
 
(例)
xxxxx.min.js
 
yyyyy.min.css
 

ファイル圧縮の目的は?

 
「YUI compressor」を使って、
 
CSSやJavaScriptファイルを圧縮する目的は
 
ずばり通信量を削減して、Webページの表示を速くすることです。
 
CSSやJavaScriptファイル内にスペースやタブでのインデントが行われているのが一般的です。
 
「YUI compressor」を使い、このインデントや改行のデータを削除することで、
 
ファイルサイズを(圧縮して)非常に小さくすることができて、
 
結果的にWebページの表示を速くすることができるのです。
 
そして、コメントされた箇所も一気に削除してくれます。
 

要するに、元のファイルのcommon_set.cssのコメンントはそのままにしておき、

 
書き出されたcommon_set.min.cssには、余計なスペースやタブでのインデント・コメントはすべて削除されているということです。

 

ちなみに個人的ですが、CSSとJavaScriptの圧縮を戻す場合は⇒Online JavaScript/CSS/HTML Compressorが使いやすいです。
 

「YUI compressor」がうまく動かない場合は、「java」がインストールされていない可能性があるので、以下のサイトでダウンロードでJavaをインストールしてみてください。https://www.java.com/ja/download/manual.jsp

PAGE TOP