Gruntを利用して、JavaScriptやCSSを圧縮(難読化)

GoogleのPageSpeed Insightsを利用していると、JavaScriptやCSSを圧縮してくださいみたいなことを言われるかと思います。
開発でも、JavaScriptを圧縮(難読化、minify)した状態で、動作させるかと思います。

今回は、Gruntを利用して、JavaScriptやCSSを圧縮する方法を紹介します。
ついでに、AngularJSの難読化も同時に紹介します。

node.js、npmインストール

Gruntを利用するのには、node.jsとnpmが必要なので、この2つをインストールします。

※環境はMacとなります。
※portについては、MacPortsのインストールと設定メモメモなどを参考にしてください

Gruntのインストール

Gruntfile.jsの記述

Gruntfile.jsに処理を行いたいことを記述していきます。

監視するファイルと出力先を設定するだけの簡単なものとなります。

gruntコマンドで実行する

Gruntfile.jsがある階層で以下のコマンドを実行します。

以下のコマンドでwatchに設定しているファイルの更新を監視し、ファイルが更新されたら圧縮処理などを実行するようになります

これで、JavaScriptやCSSを圧縮することが簡単に可能になります。

あわせて読みたい

コメントを残す

Translate »
%d人のブロガーが「いいね」をつけました。