CSSやJavaScriptの改行やインデントを削除して圧縮したり、元に戻したりするツールまとめ

CSSやJavaScriptの改行やインデントを削除して圧縮したり、元に戻したりするツールまとめ

年末に、オンラインブックマークでたまってしまいがちな「あとで読む」とか、「一応保存」とかを整理することにしました。
そしたら、同じような内容や機能のWebサービスのページをいくつもブクマしてることに気づいてしまいました。

そこで、似たようなものは自ブログにまとめて少しブクマ数をスッキリさせることにします。

で、実はあんまり使ってないけどいざって時にあると助かる「スクリプトの圧縮&デコードツール」をまとめてみたいと思います。

まずは圧縮編から。

ファイルの改行やインデントを無くしたりしてファイルサイズを軽くするツール

私がやるような規模の案件ではまず使うことはないのだけど、サイト規模が大きくなるとこういう配慮も必要なのかも。
やってることはどのサイトでも一緒なので、各自見やすい・使いやすいと感じるやつを選んでいただければよろしいかと。

CSS編

  • CSS Compressor
    圧縮度合いを4段階から選べる。どこをどう変えたか、ってログも出る。
  • CSS Drive Gallery- CSS Compressor
    圧縮度合い3レベル+コメントを残すかを選べる。でも、ソース内の日本語(フォント名やコメント)には対応してないのが致命的。。。
  • Code Beautifier
    オプション項目が多く高機能。日本語もいけました。逆に、圧縮されたものを読みやすく戻すことも出来ます。
  • Clean CSS – CSS Formatter and Optimiser
    上記Code Beautifierとほぼ同じような感じ。個人的にはこっちの方が見やすいかな。
  • CSS Optimizer (CSS最適化ツール)
    日本語版。to-Rの西畑さんが公開してるツールといういところが個人的に◎

JavaScript(&両方)編

  • dean.edwards.name/packer/
    すごくシンプルなJavaScript圧縮ツール。
  • Online JavaScript/CSS Compression Using YUI Compressor
    JSとCSS両方に対応してる。コードのコピペだけでなくファイルアップロードでもOK
  • 追加 zbugs (beta)
    こちらもJS,CSS両方に対応。特色は、自分の書いたコードだけでなく、任意のサイトのURLを入れると圧縮されたファイルをDLできるという便利サイト。100SHIKIさんで紹介されていましたので自分用に追記。)

圧縮されたスクリプトファイルを、読みやすく戻すツール

こっちの方が自分はお世話になる率が高いかも。
配布プラグインでmin版しかない時とか多いので、解読時にあると便利。

CSS編

  • styleneat
    コードのコピペ、ファイルアップロード、URI入力に対応。
  • Format CSS Online
    デコード時の設置がわりと細かく出来る。
  • Code Beautifier(既出)
  • Clean CSS – CSS Formatter and Optimiser (既出)

JavaScript編

基本的に海外モノですが、そんなに恐れることなく使えるものばかりです。

#
初めて「まとめ記事」を書いた気がします。
まとめ記事って人気ですが、ついついブクマしたことで満足してしまって使わないことって多いですよね。
特に、「****なまとめ50」とか・・・・・・50も使えんわ!みたいなcoldsweats01

だから、まとめ記事を読んだ後は、自分で「まとめなおし記事」なんか書くといいかもな、と思いました。