Gruntの初期設定について

gruntの初期設定が辛すぎたので、手順を記載。

今回入れたのは

1. grunt-watch
2. grunt-contrib-compass
3. grunt-contrib-uglify
4. grunt-typescript

インストール方法

##① gruntをインストール
terminalを立ち上げてgruntをインストール（間違えてgemとかしないように。）macなので、sudoをつける。
ちゃんとgruntをインストールしていないと後の作業でエラーがでるのでnpm listとかしてインストール済みか確認する。

ターミナル上のコマンド

sudo npm install -g grunt-cli

##② finderでprojectがあるフォルダを開く
初期ファイル一式を作りたいフォルダをcdと打ってからターミナルへドラッグしてエンター

ターミナル上のコマンド

cd 該当ファイルのパス

##③ 初期ファイルの生成
project.jsonが生成される
gruntのインストール

ターミナル上のコマンド

npm init
npm install grunt --save-dev

同じ階層にGruntfile.jsを置く
ファイルはこんな感じ。

Gruntfile.jsのソース

module.exports = function(grunt) {
	var pkg = grunt.file.readJSON('package.json');
		grunt.initConfig({
	});
}

##④ プラグインのインストール
--save-devをつけるとjsonにプラグイン名を入れてくれる
インストールするとnode_modulesフォルダに追加されているか確認してください。

ターミナル上のコマンド

npm install インストールするプラグイン名 --save-dev

##⑤ プラグインの設定
Gruntfile.jsの中身記述

Gruntfile.jsのソース

module.exports = function(grunt) {
	var pkg = grunt.file.readJSON('package.json');

	//プラグインごとの設定
	grunt.initConfig({
		compass: {
			dist: {
				options: {
					config: 'config.rb'
				}
			}
		},
		watch: {
			uglify: {
				files: ['./js/*.js'],
				tasks: ['uglify']
			},
			scss: {
				files: ['./scss/*.scss'],
				tasks: ['compass'],
				options: {
					livereload: true,
					nospawn: true
				}
			},
			script: {
				files: ['./ts/*.ts'],
				tasks: ['typescript']
			}
		},
		uglify: {
			build:{
				options:{
					report: 'minify',//'gzip'
					mangle: true,
					compress: true,
					beautify: false
				},
				src: ['./js/typeclass.js'],
				dest: './js/onload.js'
			}
		},
		typescript: {
			base: {
				src: ['./ts/typeclass.ts'],
				dest: './js/typeclass.js',
				options: {
					module: 'amd', //or commonjs
					target: 'es5', //or es3
				}
			}
		}
	});

	//grunt.loadNpmTasks('grunt-jslint');//まだ設定してない。
	grunt.loadNpmTasks('grunt-contrib-uglify');
	grunt.loadNpmTasks('grunt-contrib-watch');

	//ここからはお好み
	grunt.loadNpmTasks('grunt-contrib-compass');
	grunt.loadNpmTasks('grunt-typescript');


	// デフォルトタスクなどのタスク名を設定
	grunt.registerTask('default', ['watch','jslint','compass','typescript','uglify']); 
}

##⑥ grunt起動
ターミナルにgruntと打つと自動化の開始。
watchはcompassとおなじでctrl+cで終了。

ターミナル上のコマンド

grunt