一から勉強させてください( ̄ω ̄;)

最下級エンジニアが日々の学びをアウトプットしていくだけのブログです。

GruntでCSS、JSの圧縮をしてみた

今回は普段、地味に鬱陶しいCSSやJSの圧縮処理をGruntを使ってやってみたときのことを書きたいと思います。

まずGruntとはなんぞやということですが、、

Gruntとはファイルのコピーや削除、JSやCSSの圧縮やgzip化、画像の圧縮、Sprite化などを自動化してくれるビルドツールです。Node.jsで動作しており、基本コマンドラインから実行します。

それでは早速。まずは導入から。

とりあえず導入作業はこちら↓の記事を参考にさせて頂いて進めることにします。

http://js.studio-kingdom.com/grunt/doc/getting_started
http://www.riaxdnp.jp/?p=4659


あと今回、node.jsはすでに入っている前提で書きます。

以前書いたこれ↓
http://dangerous-animal141.hatenablog.com/entry/2013/03/20/231924

と同じようにして、

nvmから

・node.js:0.10.15
・npm : 1.3.5

のバージョンを使用する設定としました。


1、grunt-cliのインストール

まずはじめに、gruntのコマンドラインインターフェース(CLI)をグローバル上にインストールしなければいけないぽいす。

でもやり方は簡単で、

npm install -g grunt-cli 


でOK。グローバルだから-gですね。

問題なく、インストールできました。


2、package.jsonの準備

gruntを使うためにはpackage.jsonとGruntfile.js(または.coffee)を準備する必要があります。
今回はgrunt_sampleというフォルダを用意して、そこのルートにpackage.jsonとGruntfile.jsを用意してみようと思います。

package.json

npm init


というコマンドをたたくと、
優しく質問を投げかけてもらえたので、それにしたがって名前やらなんやらをつけてると土台っぽいのができました。

package.jsonが存在していればgruntとそのプラグインをインストールできるようになるのでひとまずOKです。

僕ははじめnpm initを忘れて、npm install gruntしようとしてエラー出しまくったので注意してください。。


3、grunt、grunt-contrib(今回使うやつ)のインストール

次はgruntとそのプラグインのインストールです。今回は事前に調査をしたところ、


・grunt-contrib-uglify
・grunt-contrib-cssmin


というプラグインを使えばjsとcssを圧縮できるっぽかったので、gruntとgrunt-contribをインストールしてみることにします。
ちなみに場所は2でつくったgrunt_sampleフォルダのままです。

grunt本体は、プロジェクトフォルダごとにローカルにインストールする構成になっているみたいですね。

インストールは

npm install grunt -save-dev //grunt

npm install grunt-contrib -save-dev //プラグイン


と叩くとできました。

–save-devというパラメータをつけることで、そのプロジェクトで使用しているパッケージの情報をpackage.jsonに保存することができるみたいで、ちゃんとgrunt_sampleにあるpackage.jsonにも

"devDependencies": {
    "grunt": "~0.4.1",
    "grunt-contrib": "~0.7.0"
  }


という記述が追加されました。


4、Gruntfile.jsの準備

最後にGruntfile.jsです。
3でgrunt_sampleフォルダにnode-modulesフォルダができ、その中にgrunt、grunt-contribがちゃんと入っていたので、あとはこれらを使って実行処理を書いてあげればOKみたいですね。

Gruntfile.jsを作成します。
中身はこちら。

module.exports = function(grunt){
 
	// loadnpmTasksで使用したいタスクを読み込んでおく
	grunt.loadNpmTasks("grunt-contrib-cssmin");
	grunt.loadNpmTasks("grunt-contrib-uglify");
 
	// initConfigで基本設定
	grunt.initConfig({
		uglify : {
		    min : {
		        files: {
			    "js/sample.min.js" : ["js/sample1.js", "js/sample2.js"]
			}
		    }
		},
		cssmin : {
	            min : {
	                files : {
	                    "css/sample.min.css" : ["css/sample1.css", "css/sample2.css", "css/sample3.css", "css/sample4.css"]
	                }
	            }
	      }
	});
 
	// registerTask でタスクに名前をつける
	// defaultでデフォルトのタスクを設定
	grunt.registerTask("default", ["uglify", "cssmin"]);
 
};


ざっと見てみると、

まずmodule.exportsはnode.jsのモジュール書くときの書き方ですね。
exportsとmodule.exportsがいつもよくわからんようになるのですが、


http://koexuka.blogspot.jp/2013/04/nodejsexportsmoduleexports.html
http://d.hatena.ne.jp/jovi0608/20111226/1324879536


こんな感じで解説してくださっている記事もありました。感謝!


で、あとは


・grunt.loadNpmTasks()で使用するものを読み込み
・grunt.initConfig()でタスクの設定
・grunt.registerTask()で実行するタスクを登録


といった感じでOKぽいです。


タスクの設定に関しては


http://js.studio-kingdom.com/grunt/doc/configuring_tasks


を参考にしたのですが、コンパクト形式とかファイルオブジェクト形式とか様々な形式があるみたいですね。

今回はファイルオブジェクト形式とやらの書き方を真似てみたのですが、まだいまいち使い分けとかよくわからんので引き続き勉強していきます。


んで、以上のGruntfile.jsが完成したら、コマンドラインから

grunt


とするだけで処理をやってくれて、見事圧縮されたCSSとJSが作成できました。


今回は簡単な導入〜簡単なCSS、JSの圧縮処理だけでしたが、これはめっっちゃ便利ですね!!
他にもいろんなプラグインがあるので、どんどん試していこうと思います。


小さな事からコツコツと。