gruntでJavaScript/CSSを結合・minify

Mac CSS JavaScript

何とか見よう見まねで設定できたのでメモ。
他に良い方法があるんだと思うのだけど、ひとまず出来たので。

gruntのインストール

グローバル設定でインストールします。

$ npm install -g grunt

grunt-contribのインストール

プロジェクト内にインストールしました。
（何度もインストールしたくないのだけど、-gでインストールすれば良いのかな？）

$ npm init
$ npm install grunt-contrib --save

grunt.js

gruntへのタスクを記述するファイルです。

  • ./src/js/*.jsを./js/all.min.jsに
  • ./src/css/*.cssを./css/all.min.cssに

まとめています。

module.exports = function(grunt) {
	grunt.loadNpmTasks('grunt-contrib');
	grunt.initConfig({
		concat: {
			js: {
				src: ['./src/js/*.js'],
				dest: './js/all.js'
			},
		},
		min: {
			js: {
				src: ['./js/all.js'],
				dest: './js/all.min.js'
			},
		},
		mincss: {
			"./css/all.min.css": ["./src/css/*.css"]
		}
	});
	grunt.registerTask('default', 'concat min mincss');
};

実行

$ grunt
Running "concat:js" (concat) task
File "./js/all.js" created.

Running "min:js" (min) task
File "./js/all.min.js" created.
Uncompressed size: 916 bytes.
Compressed size: 407 bytes gzipped (694 bytes minified).

Running "mincss:./css/all.min.css" (mincss) task
File ./css/all.min.css created.
Uncompressed size: 11187 bytes.
Compressed size: 1980 bytes gzipped (8987 bytes minified).

Done, without errors.

これで生成されます。

監視

ファイルの変更の都度、コマンドを叩くのは面倒なので、ファイルが変更された時に、自動的に処理をするようにします。grunt.jsを変更します。

module.exports = function(grunt) {
	grunt.loadNpmTasks('grunt-contrib');
	grunt.initConfig({
		concat: {
			js: {
				src: ['./src/js/*.js'],
				dest: './js/all.js'
			},
		},
		min: {
			js: {
				src: ['./js/all.js'],
				dest: './js/all.min.js'
			},
		},
		mincss: {
			"./css/all.min.css": ["./src/css/*.css"]
		},
		watch: {
			js: {
				files: ['./src/js/*.js'],
				tasks: 'concat min'
			},
			css: {
				files: ['./src/css/*.css'],
				tasks: 'mincss'
			}
		}
	});
	grunt.registerTask('default', 'concat min mincss');
};

watchが増えています。
監視させます。

$ grunt watch
Running "watch" task
Waiting...

ここでファイルを更新すると以下のように処理されます。

Running "watch" task
Waiting...OK
>> File "src/js/default.js" changed.

Running "concat:js" (concat) task
File "./js/all.js" created.

Running "min:js" (min) task
File "./js/all.min.js" created.
Uncompressed size: 917 bytes.
Compressed size: 408 bytes gzipped (694 bytes minified).

Running "watch" task