js,cssを圧縮

• Webサイトで読み込ませるjsやcssは、ちょっと詳しい人ならすぐ中身を見れてしまう
• なのでコメントで「ここはまだ未実装」とか書きづらい
• しかし、継続的に開発するならコメントを残すことは必須
• そこで、開発用のスクリプトをそのまま読み込ませるのではなく、加工したものを用意し、そちらを読み込ませる
  • 処理内容自体は変えない
  • コメントは削除
  • 処理の流れをわかりにくくし、万一脆弱性があってもソースコードから突かれにくくする
  • ファイルサイズも小さくし、ネットワークの負担を減らす
• これを「圧縮」といい、自動的に行ってくれるツールがいくつかある

• YUI Compressorという圧縮ツールがある
• PhpStormで、js, cssファイルを監視し、○○.jsに変更があれば自動的にYUI Compressorに通し、○○.min.jsを作ってくれるよう設定する

.jarを取ってきて適当な場所に配置するだけ

Releases · yui/yuicompressor · GitHub

PhpStormの[Settings]で、[Tools]→[File Watchers]を選択

右ペインの「＋」（新しいWatcherを追加）を押すと、Watcherの種類が表示されるので、「YUI Compressor CSS」または「YUI Compressor JS」を選択

Watcherの設定画面が開くので、[Program]に、先ほどのyuicompressor.jarのパスを入力

変なディレクトリ構造にしてない限りは、その他の設定は最初から入力されているはず（されてなかったらその時調べる）

[OK]で監視が始まり、停止させない限りは以降の起動時にも最初から監視が行われる

試しにcssを更新してみて、min.cssができるのを確認する

著作権表記など、これだけは消して欲しくない、というコメントがある場合は、

/*! hogehoge */

より細かなことをやろうと思えば、複数のツールを組み合わせる自動化ツールが存在する。

圧縮だけでなく、sassで書いたスクリプトをcssにコンパイルした後で圧縮し、ファイル名に「hoge-」を付けて出力するなど。

grantやgulpといったものが有名どころ。gulpは、Node.jsの元で動く。

• やりたい機能を持ったプラグインをインストール
• どのファイルを監視するか、ファイルに更新があればどのプラグインに順番に通すか、などの設定ファイルを記述
• gulpを走らせる。高度な自動化が完成！

でも、Webの最先端を仕事にしてがっつりやる人ならともかく、たまに触る程度なら、複雑すぎる。

• 設定ファイルってどう書くんだっけ
• このプラグイン動かなくなってるんだけど
• そもそもsassの文法を忘れた

ちょっと、自分にとっては学習コストが高すぎるので、簡単に済むYUI Compressorでいいや。

JSビルドツールをRakeで組むことにした - Qiita

RubyにはRakeというものがあり、上の記事ではそれを使って（gulpのように専用のプラグインでは無く）おのおのの本家のツールをコマンドライン上で順番に動かすことを自動化しているようだ。Rubyでなくても同じ原理で自動化はできそうだし、それならばプラグイン作者の保守が疎かであっても、本家が生きている限り、突然動かなくなるリスクは減らせる。