フロントエンジニアのみなさーん！今日もゴリゴリHTMLコーディングしてますかー！？
本当はHTMLよりも、音の波形をずっと眺めていたいTomicciです。こんにちは。
今回は、CSSや、JavaScriptのファイルの圧縮に関して、今やっている案件のHTMLコーディングの息抜きがてら、記事を書いてみます。
クリックでジャンプ
ファイルを圧縮するってどういうこと？
サイトの読み込み速度などを意識するようになると、ファイルを圧縮したくなると思います。
圧縮というとなんだか難しそうですが、要はCSSやJavaScriptなどで、人がコードを見やすいように使用した、改行やタブ、半角スペースなどによるインデント、コメントなどを削除して少しでもファイルサイズを減らして、ブラウザの読み込み速度を向上させようとする作業のことです。
圧縮前のファイル名が「common.css」だとすると、圧縮後は「common.min.css」といった名称でファイル名を付けることが多いですね。
ファイルの圧縮ってどうやってやるの？
これまでは、ファイルの圧縮を行う際はインターネット上のサービスを使用して、ブラウザ経由で圧縮することをよくやっていました。
Yahoo!が出しているYUI Compressorは有名ですね。ダウンロードしてきて、ターミナル経由で圧縮させるなんて設定も可能らしいです。
ただ、この手順は、CSSやJavaScriptのファイルを修正する度に、ファイルをアップロードして圧縮の手順を繰り返さなければいけません。。これは、かなり難儀な作業です。
もしかして、Sublime Text3のプラグインで、ファイルを圧縮できないかなと思って調べたところ、いいプラグインがありました…！
しかもそのプラグインは、「YUI Compressor」を使用したものということではありませんか！
では、早速使ってみましょう。
Sublime Text3にYUI Compressorをインストール
Sublime Text使いであれば皆さん大好きパッケージコントロールを使用して「YUI Compressor」のプラグインを入れてみましょう。
■Mac
⌘(Command) + ⇧(Shift) + P
■Win
Ctrl + Shift + P
もしくはTools → Command Palette を選択します。
コマンドパレットを呼び出して、「install」と入力しましょう。
「Package Control: Install Package」と表示されますので、Enterキーを押します。
パッケージ名を入力する画面となりますので、「YUI Compressor」と入れてください。
これで、インストール完了です！プラグインの追加が圧倒的に簡単すぎるよSublime Text！！
Sublime Text3でYUI Compressorを使用する
では、早速ファイルを圧縮してみましょう！
何か開きたいCSSファイルなどを開いてみてください。「xxxx.css」
圧縮するには、ファイルを開いた状態で、
■Mac
⌘(Command) + B
■Win
Ctrl + B
と入力します。
そ〜れ、圧縮圧縮…！
これだけで簡単に「xxxx.min.css」と圧縮されたファイルが同一階層のフォルダ内に出力されしました！！
この時は1.4秒かかってますがw、それでもターミナル立ち上げてとか、ブラウザ開いてCSSファイルをアップロードしてってやるよりも、はるかに早いですね…！
プラグインの設定を変更
YUI Compressorをインストールしたままの状態だと、1行のソースに圧縮してくれないようです。これは変更可能なので変えちゃいましょう。
メニューから、「Preference」→「Browse Packages」と進み、「YUI Compressor」フォルダを開き、「YUI Compressor.sublime-build」というファイルを編集します。
[text]"--line-break", "150"[/text] という行が2箇所ありますので、 [text]// "--line-break", "150"[/text] のようにコメントアウトしましょう。
これで圧縮した際に、1行のソースにしてくれます！
便利な「YUI Compressor」プラグイン、是非活用して素敵な圧縮ライフを過ごしましょう。
