SHIDEN DESIGN BLOG

thumnail_20170201

SublimeText3で簡単にmin.cssやmin.jsファイルを作る方法

SponsorLink

javascriptやスタイルシートのファイルを圧縮する方法は色々ありますが、今回は比較的簡単な方法を紹介しようと思います。
 
尚、OSはWindows10でSublimeText3をインストールしていると言う前提で話を進めていきますので、SublimeText3をインストールしていない方はコチラのページからインストールしてください。
SublimeText3に関する詳しい説明は省かせていただきます。
 

SublimeText3で簡単にYUI Compressorを使ってファイルを圧縮

 
YUI Compressorとはファイル圧縮の定番ツールとして知られています。
このツールはjarと言うファイル形式で提供されていますので、SublimeText3のプラグインとして使う場合も、実行にはJavaの実行環境を構築しておく必要があります。
 

Javaのインストール

 
まずはコチラのページからJDKをダウンロードしてインストールします。
画像の赤枠で囲ってある方をクリックしてください。
 
posi_img_2017020113
 
Java SE Development Kitと書かれた方から、お使いの環境に合わせてダウンロードしてください。
 
posi_img_2017020114
 
後はインストーラーが立ち上がるので、指示に従ってインストールを進めていきます。
途中、インストール先のパスが表示されるのでメモしておくと便利です。
 
インストールが済んだら、コマンドプロンプトを起動してください。

と入力しエンターキーを押してください。
画像のようにJavaのバージョンが表示されればインストールは完了です。
 
posi_img_2017020109
 
 

PATHの設定とJAVA_HOMEの設定

 
SublimeText3でYUI Compressorを使うだけならこれらの設定は必要ありませんが、アプリケーションによってはJAVA_HOMEと言う環境変数に設定されている値を参照してJavaを利用する事があります。
将来、Javaの開発環境を構築したりAndroidアプリを開発してみようと思うかもしれません。
やっておいて損はないのでJavaのインストールついでにやっておきましょう。
 
今回はWindows10で説明していきますがWindowsであれば基本的な設定方法は同じです。
 

PATHの設定

まずはスタートボタンを右クリックしてシステムをクリックします。
 
posi_img_2017020101
 
次にシステムの詳細設定をクリックします。
 
posi_img_2017020102
 
システムの詳細設定から、一番下の環境変数をクリックします。
 
posi_img_2017020103
 
システム環境変数の中から変数にPathと書かれたものを選択した状態で編集をクリックします。
 
posi_img_2017020104
 
環境変数名の編集から右上の新規をクリックすると、一番下の欄に新しく追加出来るようになるので、JDKをインストールしたディレクトリに合わせてパスを入力します。
インストールの途中でメモしておいたパスです。
最後に\binを付けることを忘れないでください。
 
posi_img_2017020106
 
パスを追加したらコマンドプロンプトを起動します。

と入力してエンターキーを押します。
画像のようにバージョンが表示されればPATHの設定は完了です。
 
posi_img_2017020110
 

JAVA_HOMEの設定

続いてJAVA_HOMEの設定を行っていきます。
 
環境変数>システム環境変数から何も選択していない状態で新規をクリックします。
新しいシステム変数が表示されますので、変数名にJAVA_HOME、変数値にPATHの設定で入力したパスの\binを外して入力します。
posi_img_2017020107
これでシステム環境変数の中にJAVA_HOMEが追加されます。
 
コマンドプロンプトを起動します。

と入力してエンターキーを押します。
画像のように表示されればJAVA_HOMEの設定は完了です。
 
posi_img_2017020111
 

YUI Compressorのインストール

 
やっとこの記事の本題です。
SublimeText3を開いて他のプラグイン同様Ctrl+Shuft+PでPackage Controlを開きInstall Packageを選択します。
YUI Compressorと入力、選択しインストールします。
これでSublimeText3のプラグインとしてSublimeText3上でYUI Compressorを使用してファイルを圧縮する事が出来る様になりました。
 
やり方もいたって簡単で、圧縮したいjsファイルかcssファイルを開きCtrl+Bで圧縮した元のファイルと同じディレクトリに圧縮したファイルが作成されます。
 
ただし、デフォルトの設定では150文字を超えたところで改行されるようになっています。
完全に圧縮したい場合、もしくは改行する文字数を変更したい場合は、この設定を変更する必要があります。
 

YUI Compressor.sublime-buildファイルの変更

 
C:\Users\ユーザ名\AppData\Roaming\Sublime Text 3\Packages\内のYUI Compressor.sublime-buildファイルをテキストエディタで開きます。
AppDataは隠しファイルを非表示にしていると表示されませんのでエクスプローラーの「表示」から隠しファイルのチェックボックスにチェックを入れておいてください。
 
YUI Compressor.sublime-buildを開くと、7行目と17行目に–line-breakと記載されていますので完全に圧縮したい場合はコメントアウトします。
改行する文字数を変更したい場合は後の数字を変更してください。
 
posi_img_2017020112
 
これで全て完了です。
 

最後に

 
ファイルを圧縮する事でデータ通信量を抑えることができます。
データ通信量を抑えることはサイトの表示速度の高速化にも直結します。
多くの画像データを扱うブログサイトなどでjavascriptファイルとcssファイルを圧縮しただけでは、体感として劇的な変化が見込めるわけではありません。
ですが、SEOの観点から見てもメリットはありますので、これを機にファイル圧縮に挑戦してみてはいかがでしょうか。
 
 

SponsorLink

Related Articles