【神ツール】CSSとJSの圧縮(Minify)なら、CodeKitがおすすめ【使い方解説】
フロントエンド専門のみなさまへ。
CSSとJSは圧縮(Minify)していますか？コード圧縮はやらなくてもOKですが、圧縮するとパフォーマンスアップします。パフォーマンスアップはサイト高速化に繋がるので、お客さんは喜びます。SEO的にもGOODです。
しかし、わざわざ圧縮するのってメンドイ…。
そんなときに便利なのがCodeKit。
フロントエンドエンジニアにイチオシの神ツールです。
CodeKitとは？
» CodeKit – THE Mac App For Web Developers
一言でいうと、コンパイルツールです。
CSSやJavaScriptを自動圧縮したり、SCSS、SASS、Lessを自動コンパイルしたり。あとは、Lint機能でコードミスを自動検知してくれたり、画像圧縮もしてくれたり、ブラウザのオートリフレッシュしてくれたり…。
要するに神ツールです。
画像圧縮は１クリックで完了。便利すぎる。
ブラウザのオートリフレッシュも設定画面にチェックいれるだけ。
中でも今回はCodeKitのイチオシ機能である、SCSSの自動コンパイル＋CSSとJSの自動圧縮(Minify)を詳しく解説しますね。 とくとご覧あれ。
SCSSの自動コンパイル＋CSSとJSの自動圧縮(Minify)機能の使い方
画像多めで、最高に分かりやすく解説しますね。
初期セットアップからCompassの導入までの流れ
sampleフォルダを作って、その中にindex.htmlをいれた状態です。フォルダ自体はfinderとかで作ってからCodeKitにドラッグ＆ドロップすればOK。
次にCompassというCSSフレームワークをインストールします。
「え〜フレームワーク勉強するとか面倒すぎる」って方はご安心を。Compassを学ぶ必要はないです。とりあえずインストールすればOK。これで初期セットアップ完了。まじで簡単＆秒速ですね。
SCSSの自動コンパイルからCSSの自動圧縮までの流れ
Compassをインストールするとcssとscssフォルダが自動で出来上がります。
中身はこんな感じ。ie.scssやprint.scss、screen.scssがありますが、これは削除してもいいし使ってもいいです。ぼくは名前が好きじゃないのでいつも削除してます。
このブログのWordPressテーマ（販売中）だとこんな感じ。いろいろなscssファイルがありますが、最終的にはstyle.cssに圧縮されています。
複数のscssファイルを１つのcssにするには、こんな感じにします。
複数のscssファイルを１つのcssファイルにする方法の深掘り解説
- style.scss
- _header.scss
- _footer.scss
例えば、このようなファイル設計なら、style.scss内につぎのように記述します。 ※ファイル名に「_（アンダーバー）」を入れると合体してコンパイルされるようになります。
// style.scssの中身
@import "_header";
@import "_footer";これだけで最終的なアウトプットファイルがstyle.cssになります。超簡単ですよね。
以上でSCSSの自動コンパイルからCSSの自動圧縮までの流れが完了。つぎにJSのテクニックを見ていきましょう。
JavaScriptの自動圧縮の流れ（複数のJSファイルを１つにまとめることも可能）
scriptsフォルダを作って、その中にminフォルダとtest01.jsファイルを作りました。
test01.jsのコンパイル先を指定してから、コンパイルボタンを押します。
すると、minファルダ内にtest01-min.jsが自動生成されました。このファイルはすでに圧縮されています。
複数のJSファイルを１つのJSファイルにする方法
複数のJSファイルがある場合は、１つにまとめてコンパイルできます。
test01.jsをマウスで選択した状態で、test02.jsをPrepend To This Fileにドラッグ＆ドロップします。
するとtest01-min.jsが自動生成されまして、この中身は、test01.jsとtest02.jsが合体して圧縮されたもの。すごい！！
以上が、SCSSの自動コンパイル＋CSSとJSの自動圧縮(Minify)機能の使い方です。
まとめ：「Gruntでよくない？」→「いや、コマンド操作とか無理ですわ。」
※画像は公式サイトの利用者の声より
「Gruntでよくない？」と言われそうですが、僕は黒い画面が嫌いなので、CodeKit愛があります。黒い画面が好きな人はGruntでいいと思いますが、僕はCodeKitで十分すぎています！
おわり！ ぜひダウンロードどうぞ！
CodeKit – THE Mac App For Web Developers
CodeKit automatically compiles all those awesome languages you read about in tutorials. … Easily tell CodeKit how to process files of any type, right in the UI.