UglifyJSでJavascriptファイルをコマンドラインで圧縮!おまけつき

  • Pocket
  • このエントリーをはてなブックマークに追加
  • 164 follow us in feedly

まえがき

先日UglifyCSSというCSSを圧縮するためのnodeのライブラリの使い方をメモしましたが、今回はそれのJavascript圧縮版である『UglifyJS』についてちょこっとメモしていきます!!

UglifyCSSの記事はこちら↓

UglifyCSSで簡単にCSS圧縮してみる。おまけつき

UglifyCSSで簡単にCSS圧縮してみる。おまけつき

UglifyJSについて

JSファイルの改行だったりスペースだったり、コードを最適化することによって、無駄を取っ払いファイルを軽量化するためのライブラリ(ツール)でござる。

UglifyJSのいいところはやっぱり、コマンドラインで実行できるところ!真っ黒画面が好きなエンジニアさんにお勧めです。

開発環境

  • node 0.8.22
  • npm 1.2.14
  • uglifyjs 2.4.1

UglifyJSを使うにあたってnodejsとnpmをあらかじめインストールしておく必要があります。↓ 参考程度にどうぞ

node.jsのインストール

node.jsのインストール

インストール

npm installコマンドでさくっと入れちゃいます。-gを付けておくほうがいいと思います。

# sudoは環境に合わせて
> sudo npm install -g uglify-js

# 確認
> npm -g list uglify-js

これでインストール完了です

使い方

こんな感じでパイプを使ってファイルを生成します。基本的な使い方はUglifyCSSのときと同じかな?

uglifyjs 圧縮前のファイル > 圧縮後のファイル

# sample
uglifyjs style.js > style.min.js

圧縮してみた

試しにどんくらいサイズが小さくなるのか試してみました。

今回はjQueryのファイルをダウンロードしてきてそれを軽量化してみました!!

# 圧縮前のjQueryファイルのダウンロード
wget http://code.jquery.com/jquery-1.10.2.js

# 圧縮!!
uglifyjs jquery-1.10.2.js > jquery-1.10.2.min.js

# 確認 
ls
----------------------------------------------
jquery-1.10.2.js     jquery-1.10.2.min.js
----------------------------------------------

気になるファイルのサイズですがこんな感じに

uglifyjs-1

半分ぐらいになっている!!

おまけ

UglifyCSSのときと同じようにシェルでエイリアスの関数を作ってみた。

このUglifyJSだけどコマンドが面倒くさい

何が面倒くさいかって圧縮後のファイル名を指定しないといけないところ。

例えば『style.js』を圧縮したら『style.min.js』てな感じで勝手にファイル名を決めて圧縮ファイルを作成してくれると嬉しい。

なのでシェルスクリプトで作ってみた。シェルスクリプト下手くそなんであれなんですけど。。

jsmin(){
    js=$1
    dir=$2
    min=`echo $js | sed -e 's/\.js/\.min\.js/'`
    if [ $js == $min ]; then
        return
    fi
    if [ $# -ne 2 ]; then
        dir='.'
    fi
    uglifyjs $js > "$dir/$min"
}

これをてきとうにbashrcとかで読み込ませる。

こんな感じでコマンドを実行する

jsmin 圧縮前のJSファイル [ディレクトリ]

#sample

#カレントディレクトリにjquery-1.10.2.min.jsを作成
jsmin jquery-1.10.2.js

#minディレクトリにjquery-1.10.2.min.jsを作成
jsmin jquery-1.10.2.js ./min

てな感じでございますん。

関連記事

no image

javascriptのテストツール【Jasmine】の環境構築

まえがき javascriptのテストフレームワーク「Jasmine」...

記事を読む

no image

Underscore.jsを触ってみたのでメモ

まえがき Underscore.jsを少し触ってみたので自分用のメモを...

記事を読む

405884116439

UnityでHTTP通信&JSONを取り扱う(Javascript)

まえがき つい最近までcocos2dxがわーわー騒いでた私ですが、こ...

記事を読む

no image

unityによるキーボード入力によるオブジェクトの傾き

  まえがき unityでのオブジェクトの傾きをキーイベントによって行...

記事を読む

250px-Mammouth.png

PHPをcoffeescriptっぽく書ける「Mammouth」を試してみたのでメモ

まえがき PHPのコードをcoffeescriptライクにかけるnod...

記事を読む

新着記事

no image

PHPでRubyのirbっぽいインタラクティブなスクリプトが実行できる「boris」

まえがき PHPでもRubyのirbみたいなことがしたくて探してみたと...

記事を読む

2015年の抱負と去年の振り返り〜よちよちWEB業界1年経験して〜

まえがき あけましておめでとうございます。今年もどうぞよろしくお願いし...

記事を読む

Java SE 7 Bronze試験(1Z0-802)を受けてきました

まえがき 以前から少し受けてみたかった試験『Java SE 7 Bro...

記事を読む

HubotでJenkinsのジョブを実行する

まえがき HubotをつかってJenkinsのジョブをじっこうしてみた...

記事を読む

no image

Hubotをforeverでデーモン化する

まえがき 今回はHubotをforeverを使ってデーモン化してみた時...

記事を読む

スポンサーリンク

PAGE TOP ↑