【神ツール】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
ファイルを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.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.