Code Log

プログラミングの勉強メモを残していきます。

GruntでjavaScriptファイルを結合してミニファイする。


スポンサーリンク


Gruntは、フロントエンドの作業を自動化するためのタスクランナーのこと。


Gruntのコマンド群をインストールするために、grunt-cliをインストール

npm install -g grunt-cli


package.jsonの作成

npm init

Grunt本体のインストール

npm install --save-dev grunt


何もしないGruntfile.js

module.exports = function (grunt) {
	grunt.initConfig({});
	grunt.registerTask('default', []);
}

UglifyJSでJavaScriptのミニファイ

npm install --save-dev grunt-contrib-uglify

以下の2つのJSファイルを結合して圧縮。

test1.js

var hello = function(user) {
	console.log("hoge:" + user.name);
}

test2.js

(function() {
	var user = { "name" : "takashi"};
	hello(user);
})();

Gruntfile.js

module.exports = function (grunt) {
	grunt.initConfig({
		uglify: {
			dist: {
				files: {
					'dest/output.min.js' : [
					  'src/test1.js',
					  'src/test2.js'
					]
				}
			}
		}
	});

	//プラグインからタスクを読み込む
	grunt.loadNpmTasks('grunt-contrib-uglify');

	//defaultのタスクとして、上で定義したuglifyをセットする
	grunt.registerTask('default', ['uglify']);
}


実行すると、output.min.jsが出力される。

node output.min.js
hoge:takashi


黒い画面は怖くない ターミナルでWeb製作をパワーアップ

黒い画面は怖くない ターミナルでWeb製作をパワーアップ