05/01 12:55

Gruntを試してみたメモ

kaneko


金子です。
jsやcssのコンパイルや圧縮を自動化してくれるGruntを試してみました。
入門ということで、SassとCoffeeScriptのシンプルなコンパイルの流れをやってみます。

インストールから使い方
様々なサイトで紹介されていますが、
インストールから基本的な使い方、プラグインの使用方法など、下記のサイトなどを参考にさせていただきました。



以下の流れを作ります。
  • SassとCoffeeScriptのファイルを監視し、保存時にコンパイル
  • SassとCoffeeScriptのコンパイル後、そのまま自動的にmin圧縮

上は常に監視をして保存の度に実行するようにし、下はリリース時に一度だけ実行するようにします。


ファイル構成
試してみたファイル全体の構成は下記のようになっています。
.
├── Gruntfile.js //gruntの設定ファイル
├── build // SassとCoffeeScriptのコンパル先ディレクトリ
│   ├── css
│   │   └── style.css
│   └── js
│       └── index.js
├── src // SassとCoffeeScriptの作業ディレクトリ
│   ├── coffee
│   │   └── index.coffee
│   └── sass
│       └── style.scss
├── css
│   └── style.min.css
├── js
│   └── index.min.js
├── lib
│   └── jquery
│       ├── jquery-1.9.1.min.js
│       └── jquery.easing.min.js
├── package.json // 必要なプラグインなどを記述しておく
└── index.html
srcディレクトリ以下で作業した後、buildディレクトリにcssとjsを書き出す。
リリース時にはcssディレクトリとjsディレクトリにmin圧縮したものを書き出す。
という感じで作ってみました。

使ったプラグインは
  • grunt-contrib-compass // Sassのコンパイル
  • grunt-contrib-cssmin // css圧縮
  • grunt-contrib-coffee // CoffeeScriptコンパイル
  • grunt-contrib-jshint // jsチェック
  • grunt-contrib-uglify // jsの圧縮
  • grunt-contrib-watch // 監視

になります。

以下はgruntの設定をするGruntfile.jsの中身
module.exports = function(grunt)
{
	var pkg = grunt.file.readJSON('package.json');
	grunt.initConfig(
	{
		// css
		cssmin:
		{
			compress:
			{
				files:
				{
					'css/style.min.css':['build/css/style.css']
				}
			}
		},
		compass:
		{
			dev:
			{
				options:
				{
					config: "compass_config.rb",
					environment: "development",
					force: true
				}
			},
			prod:
			{
				options:
				{
					config: "compass_config.rb",
					environment: "production",
					force: true
				}
			}
		},

		// js
		coffee:
		{
			compile:
			{
				files:
				{
					'build/js/index.js': ['src/coffee/*.coffee']
				}
			}
		},
		uglify:
		{
			my_target:
			{
				files:
				{
					'js/index.min.js': 'build/js/index.js'
				}
			}
		},
		jshint:
		{
		  files: ['build/js/index.js']
		},

		watch:
		{
			files:['src/coffee/*.coffee', 'src/sass/*.scss'],
			tasks:['compass:prod', 'coffee', 'jshint' ]
		}
	});

	var t;
	for(t in pkg.devDependencies)
	{
		if(t.substring(0, 6) == 'grunt-')
		{
			grunt.loadNpmTasks(t);
		}
	}

	grunt.registerTask('default', [ 'compass:prod', 'coffee', 'jshint' ]);
	grunt.registerTask('release', [ 'compass:prod', 'cssmin', 'coffee', 'jshint', 'uglify' ]);
};
参考サイトを元に、自分のファイル構造に合うように調整して書いています。
今回は書き出されるcssとjsが1ファイルずつになるようになっています。


実行と監視

・SassとCoffeeScriptファイルの変更を監視し、保存時に自動で書き出すコマンド
$ grunt watch
このコマンドを実行することで、SassとCoffeeScriptのファイルがコンパイルされ、buildディレクトリ以下に書き出されます。

・書き出し後、cssとjsをmin圧縮してくれるリリース用コマンド
$ grunt release
このコマンドで、上記の様にbuildディレクトリに書き出した後、min圧縮したものをcssとjsそれぞれのディレクトリに書き出します。


SassとCoffeeScriptのシンプルなコンパイルの流れを作ってみました。

バージョンがまだ0.4でこれからいろいろと変更もあるかと思いますが、
便利ですので使っていけたらと思ってます。

今後livereload周りも試して書きたいと思います。

今回の一式ファイルはこちら download

COMMENT