

jQueryやBootstrapなど .min
とついているファイルはスペースやコメントもなくギュウギュウ詰めで書かれているのですが、このようなものはどうやって作成するのでしょうか？


CC BY-SA 3.0
2015-02-10T02:59:11.287
6212
2015-02-17T09:23:28.767
450
question
javascript html css
.min のファイルはどうやって作るのですか


ファイルのminifyですね。  
オンラインのサービスもいろいろありますし、  
<http://www.webworkersclip.com/2578/>  
<http://javascript-minifier.com/>

gruntに組み込んで自動化したりもできます（grunt-contrib-uglifyのところです）。  
<http://qiita.com/bps/items/a8dac15c764d9dfca354>


CC BY-SA 3.0
2015-02-10T03:26:30.583
6219
2015-02-10T03:26:30.583
3516
6212
answer


MinifierやUglifierと呼ばれるツールを使用しております。

NodeJS製のGruntのプラグインで[grunt-contrib-uglify](https://github.com/gruntjs/grunt-
contrib-uglify)などがあります。

また、同様の機能をもったWebサービスなどもあります。  
例:<http://minify.avivo.si/#results>


CC BY-SA 3.0
2015-02-10T03:32:51.387
6220
2015-02-10T03:32:51.387
871
6212
answer


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/>


CC BY-SA 3.0
2015-02-11T09:50:40.800
6314
2015-02-11T09:50:40.800
8160
6212
answer


Mac の GUI アプリをご紹介しましたが、 YUI Compressor のほうが簡単かもしれません。

YUI Compressor  
<http://yui.github.io/yuicompressor/>

下記のようなコマンドで minify 化できるようです。

[code]

    $ java -jar yuicompressor-x.y.z.jar myfile.js -o myfile-min.js
    
[/code]

（少し古い記事ですが） GUI もあるようです。

YUI Compressor GUI 1.1.0 リリース | Ikemasa Blog  
<http://blog.ikemasa.com/yui-compressor-gui-1-1-0/>


CC BY-SA 3.0
2015-02-11T10:51:30.767
6316
2015-02-11T10:51:30.767
8160
6212
answer


ご使用のIDEに統合しやすいものを選ぶのが良いと思いますが、Visual Studioであれば[Web
Essentials](http://vswebessentials.com/)が一般的です。単体アプリに比べてファイルの保存時に自動的に実行されるといったメリットがあります。


CC BY-SA 3.0
2015-02-11T11:45:36.760
6320
2015-02-11T11:45:36.760
5750
6212
answer


ツールを紹介した回答ばかりなので、あえて参考用に ~~変態的~~ 別解の  
手動圧縮について書いておきます。

まず、コードを圧縮するのは「読み込み速度」と「難読化」に対応するためです。  
javascriptはコードの中に可読性を高めるための余分なものや  
省略可能なものが沢山混じっています。

そこで初期のweb開発者の一部は自力で圧縮を行っていました。  
そのノウハウを自動化したものが現在の圧縮ツールの原型です。

つまり開発者のスキル次第では現在のツールを越える位の圧縮も可能です。  
ロジック自体をアプリケーションの目的に特化して圧縮するのは開発者の方が有利ですから。

> 圧縮方法の一例  
>  影響を及ぼさないスペース、タブおよび改行文字を省略。  
>  if～elseを?:演算子に変更。  
>  複数回参照するオブジェクトやメソッドを短い名前の変数に代入。

参考サイト  
<http://leaf.argyr.net/javascript/short-coding/>

もし手動での圧縮に興味が有りましたら以下のキーワードで検索して見てください。  
・ javascript コードゴルフ  
・ javascript ショートコーディング


CC BY-SA 3.0
2015-02-17T09:23:28.767
6637
2015-02-17T09:23:28.767
5479
6212
answer