CSSとJSをAtomで自動的に圧縮する

CSSとJSをAtomで自動的に圧縮する

こんにちわ、ライブラリとかを使用する際とかに「style.min.css」と言った圧縮されたファイルをよく見かけますよね。

「.min」は、minifyのことで改行やスペースなどの不要なものを削除してファイルを圧縮する手法のことです。

CSSやJSを圧縮するには、WEBツールやサーバーサイドで行う方法がありますが、今回はエディタで自動圧縮する方法をご紹介したいと思います。

エディタで自動圧縮するメリットとしては、サーバーサイドで行う場合、各サーバーごとに設定しなければいけないので、複数のサーバーを利用する人は何回も設定しなければいけないですが、エディタの場合は、一度設定すればOKです。

使用するもの

インストール

  1. ATOMを公式ページからDLしインストールします。
  2. ATOMの設定画面を開き、左タブの「Install」をクリックします。
  3. 入力欄に「atom-minify」と入力し、出てきたものをインストールします。
  4. CSSファイルを開き保存した際に「.min」の付いたファイルが自動生成されればインストール完了です。 JSを自動圧縮したい場合は、設定画面よりJSも自動圧縮するように設定してください。

おわりに

僕は、ATOMでPHPを書くときは以下のパッケージを利用しています。