jQueryやBootstrapなど .min とついているファイルはスペースやコメントもなくギュウギュウ詰めで書かれているのですが、このようなものはどうやって作成するのでしょうか?
6 件の回答
ファイルのminifyですね。
オンラインのサービスもいろいろありますし、
http://www.webworkersclip.com/2578/
http://javascript-minifier.com/
gruntに組み込んで自動化したりもできます(grunt-contrib-uglifyのところです)。
http://qiita.com/bps/items/a8dac15c764d9dfca354
MinifierやUglifierと呼ばれるツールを使用しております。
NodeJS製のGruntのプラグインでgrunt-contrib-uglifyなどがあります。
また、同様の機能をもったWebサービスなどもあります。
例:http://minify.avivo.si/#results
Mac ですと JavaScript の minify をしてくれるデスクトップアプリがあります。Codekit が有名ですが、 無料の Prepros というアプリも良さそうです。(どちらも使ったことがないので使い勝手はわかりません…。)
- Codekit
https://incident57.com/codekit/ - Prepros
https://prepros.io/
テキストエディタによっては minify の機能が付いていたりプラグインがあったりします。SublimeText はプラグインがあるようです。
たった1秒!Sublime TextでCSS/JavaScriptを簡単に圧縮・整形する方法 | Web Design Workbook
http://webdesign-workbook.com/sublime-text-compress-css-js/
ご使用のIDEに統合しやすいものを選ぶのが良いと思いますが、Visual StudioであればWeb Essentialsが一般的です。単体アプリに比べてファイルの保存時に自動的に実行されるといったメリットがあります。
Mac の GUI アプリをご紹介しましたが、 YUI Compressor のほうが簡単かもしれません。
YUI Compressor
http://yui.github.io/yuicompressor/
下記のようなコマンドで minify 化できるようです。
$ java -jar yuicompressor-x.y.z.jar myfile.js -o myfile-min.js
(少し古い記事ですが) GUI もあるようです。
YUI Compressor GUI 1.1.0 リリース | Ikemasa Blog
http://blog.ikemasa.com/yui-compressor-gui-1-1-0/
ツールを紹介した回答ばかりなので、あえて参考用に変態的別解の
手動圧縮について書いておきます。
まず、コードを圧縮するのは「読み込み速度」と「難読化」に対応するためです。
javascriptはコードの中に可読性を高めるための余分なものや
省略可能なものが沢山混じっています。
そこで初期のweb開発者の一部は自力で圧縮を行っていました。
そのノウハウを自動化したものが現在の圧縮ツールの原型です。
つまり開発者のスキル次第では現在のツールを越える位の圧縮も可能です。
ロジック自体をアプリケーションの目的に特化して圧縮するのは開発者の方が有利ですから。
圧縮方法の一例
影響を及ぼさないスペース、タブおよび改行文字を省略。
if~elseを?:演算子に変更。
複数回参照するオブジェクトやメソッドを短い名前の変数に代入。
参考サイト
http://leaf.argyr.net/javascript/short-coding/
もし手動での圧縮に興味が有りましたら以下のキーワードで検索して見てください。
・ javascript コードゴルフ
・ javascript ショートコーディング