え!?わずか1秒でCSS / JavaScriptファイルを圧縮!Sublime Text3にYUI Compressorを入れてみた。

フロントエンジニアのみなさーん!今日もゴリゴリ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」というファイルを編集します。

"--line-break", "150"

という行が2箇所ありますので、

// "--line-break", "150"

のようにコメントアウトしましょう。

これで圧縮した際に、1行のソースにしてくれます!

便利な「YUI Compressor」プラグイン、是非活用して素敵な圧縮ライフを過ごしましょう。

圧縮されたファイルを見やすく整形する方法も紹介しました! ※後日追記

プロから直接学べるプログラミングスクールの紹介!PHPコースあり!

Webデザインスクールの「WebCamp」が手がけるママのためのWebデザインコース

1ヶ月の短期集中でWebデザイナーを目指せます。仕事復帰を希望する主婦やママさんにオススメです。

1ヶ月でHP作成!WebCamp

【参考記事】HTMLの勉強ならTechAcademy(テックアカデミー)のフロントエンドコースが短期集中でオススメ!

自己流でプログラミングを覚えようとすると、環境設定でつまづく、書いたプログラムがなぜ動かないか解決できず、多大な時間を浪費してしまいがちです。

担当の指導者(メンター)が付いてくれるTechAcademyなら、分からないことをどんどん質問して解決できます!コードレビューしてもらえるのも素晴らしい点ですね。

プログラミング 無料体験

【参考記事】HTMLの勉強ならTechAcademy(テックアカデミー)のフロントエンドコースが短期集中でオススメ!

Web制作会社が立ち上げたWebデザイナー育成スクール Web塾超現場主義

Web制作に実際に携わっている講師陣が、現場で通用するスキルを伝授します!卒業後は転職支援、仕事紹介などを行っており、フリーランス独立する道を探すこともできそうです。

まだ「独立・開業はちょっと...」という方へは、当社の制作案件をお手伝いして頂く道も開けます。
Facebookアカウントでコメント

※本コメント機能はFacebookによって提供されており、この機能によって生じた損害に対してザ サイベースは一切の責任を負いません。

ABOUTこの記事を書いた人

とみっち

数年前までバンド活動してました。ブログ、サイト運営で食べてます。フリーランス歴7年のWebクリエイター。飄々と生きています。これでも育児頑張ってます。長野市出身。埼玉県川越市在住。【興味】音/Web/車(GolfV GTI等)/田舎/旅/酒 ※自然の音からデスメタルまで聴きます。@tomicci 詳しいプロフィール【運営サイト】 ザ サイベース おと風景