Written by Manabu Bannai

【神ツール】CSSとJSの圧縮(Minify)なら、CodeKitがおすすめ【使い方解説】

CSS JavaScript PROGRAMMING

フロントエンド専門のみなさまへ。

CSSとJSは圧縮(Minify)していますか?コード圧縮はやらなくてもOKですが、圧縮するとパフォーマンスアップします。パフォーマンスアップはサイト高速化に繋がるので、お客さんは喜びます。SEO的にもGOODです。

しかし、わざわざ圧縮するのってメンドイ…。

そんなときに便利なのがCodeKit。
フロントエンドエンジニアにイチオシの神ツールです。

CodeKitとは?


» CodeKit – THE Mac App For Web Developers

一言でいうと、コンパイルツールです。

CSSやJavaScriptを自動圧縮したり、SCSS、SASS、Lessを自動コンパイルしたり。あとは、Lint機能でコードミスを自動検知してくれたり、画像圧縮もしてくれたり、ブラウザのオートリフレッシュしてくれたり…。

要するに神ツールです。


画像圧縮は1クリックで完了。便利すぎる。
 


ブラウザのオートリフレッシュも設定画面にチェックいれるだけ。

中でも今回はCodeKitのイチオシ機能である、SCSSの自動コンパイル+CSSとJSの自動圧縮(Minify)を詳しく解説しますね。 とくとご覧あれ。

SCSSの自動コンパイル+CSSとJSの自動圧縮(Minify)機能の使い方

画像多めで、最高に分かりやすく解説しますね。

初期セットアップからCompassの導入までの流れ


sampleフォルダを作って、その中にindex.htmlをいれた状態です。フォルダ自体はfinderとかで作ってからCodeKitにドラッグ&ドロップすればOK。
 


次にCompassというCSSフレームワークをインストールします。

「え〜フレームワーク勉強するとか面倒すぎる」って方はご安心を。Compassを学ぶ必要はないです。とりあえずインストールすればOK。これで初期セットアップ完了。まじで簡単&秒速ですね。

SCSSの自動コンパイルからCSSの自動圧縮までの流れ


Compassをインストールするとcssscssフォルダが自動で出来上がります。
 


中身はこんな感じ。ie.scssprint.scssscreen.scssがありますが、これは削除してもいいし使ってもいいです。ぼくは名前が好きじゃないのでいつも削除してます。
 


このブログのWordPressテーマ(販売中)だとこんな感じ。いろいろなscssファイルがありますが、最終的にはstyle.cssに圧縮されています。
 


複数のscssファイルを1つのcssにするには、こんな感じにします。

複数のscssファイルを1つのcssファイルにする方法の深掘り解説

  • style.scss
  • _header.scss
  • _footer.scss

例えば、このようなファイル設計なら、style.scss内につぎのように記述します。 ※ファイル名に「_(アンダーバー)」を入れると合体してコンパイルされるようになります。

 // style.scssの中身
@import "_header";
@import "_footer";

これだけで最終的なアウトプットファイルがstyle.cssになります。超簡単ですよね。

以上でSCSSの自動コンパイルからCSSの自動圧縮までの流れが完了。つぎにJSのテクニックを見ていきましょう。

JavaScriptの自動圧縮の流れ(複数のJSファイルを1つにまとめることも可能)


scriptsフォルダを作って、その中にminフォルダとtest01.jsファイルを作りました。
 


test01.jsのコンパイル先を指定してから、コンパイルボタンを押します。
 


すると、minファルダ内にtest01-min.jsが自動生成されました。このファイルはすでに圧縮されています。

複数のJSファイルを1つのJSファイルにする方法

複数のJSファイルがある場合は、1つにまとめてコンパイルできます。

test01.jsをマウスで選択した状態で、test02.jsをPrepend To This Fileにドラッグ&ドロップします。


するとtest01-min.jsが自動生成されまして、この中身は、test01.jstest02.jsが合体して圧縮されたもの。すごい!!

以上が、SCSSの自動コンパイル+CSSとJSの自動圧縮(Minify)機能の使い方です。

まとめ:「Gruntでよくない?」→「いや、コマンド操作とか無理ですわ。」


※画像は公式サイトの利用者の声より

「Gruntでよくない?」と言われそうですが、僕は黒い画面が嫌いなので、CodeKit愛があります。黒い画面が好きな人はGruntでいいと思いますが、僕はCodeKitで十分すぎています!

おわり! ぜひダウンロードどうぞ!