gruntを使ってみる。

gruntコマンドを有効化するためにコマンドラインインターフェースをインストールする。

npm install -g grunt-cli

gruntのバージョンを確認する

npm install -g grunt-cli

package.jsonを作成する

npm init

Gruntの本体をインストールする。「--save-dev」オプションを追加することで、インストールするnpmの情報がpackege.jsonのdevDependenciesに追加される。

npm install --save-dev grunt

grunt -V
-------------------
grunt-cli v0.1.13
grunt v0.4.5

新しいファイルを作成するwindowsショートカット

ctrl + Shift + n

Gruntfile.jsを書く

プロジェクトの名前やバージョン、ディレクトリ名は、定数として一か所に記述する。
変更に強い実装にするため。
頻出ワードはgruntのinitConfigに追加するくせをつける。

module.exports = function (grunt) {
	grunt.initConfig({
		pkg: grunt.file.readJSON('package.json'),
		dirs: {
			src: 'src',
			dist: 'dist',
		},
	});
}

gruntでソースコードチェックを行う

npm install --save-dev grunt-contrib-jshint

Gruntfile.js

module.exports = function (grunt) {
	grunt.initConfig({
		pkg: grunt.file.readJSON('package.json'),
		dirs: {
			src: 'src',
			dist: 'dist',
		},
		jshint: {
			beforeconcat: ['<%= dirs.src %>/js/*.js'],
			afterconcat: ['<%= dirs.dest %>/js/*.js']
		}
	});

	grunt.loadNpmTasks('grunt-contrib-jshint');
}