08/30 13:37

[Grunt] JSファイルを結合するときに無名関数として出力する

enokido


榎戸です。

サイト上の様々なJSを開発するときに
サイト全体で共通につかうJSや、スプラッシュアニメ用のJS、フォトギャラリー用のJS…
と言った具合にモジュール単位でファイルを分けて開発しています。

これらのJSを納品前にGruntを使って結合するのですが、
この際、結合するJSを無名関数として出力することで
グローバルスコープを汚さずにすみます

■ JSファイルの連結

Gruntで複数ファイルの結合するにはgrunt-contrib-concatを使います。
下記の例では foo.js、bar.js、hoge.js を結合し、all.js として書き出しています。

concat: {
 prod: {
		 // 連結するファイル
		 src: [
			 "src/js/foo.js",
			 "src/js/bar.js",
			 "src/js/hoge.js"
		 ],
		 // 結果として生成されるJSファイル
		 dest: “build/js/all.js”
	 }
 },
この際、書き出された all.js が無名関数化するためには
次のような形式になっている必要があります。
;(function($, undefined) { 結合されたJS })(jQuery));
あたまに
;(function($, undefined) {
おしりに
})(jQuery));
がついていればいいので、それぞれを

_intro.js

;(function( window, undefined ){
'use strict';

_outro.js

}( window ));
としました。
これを先ほどのGruntfileに適用させると次のようになります。
concat: {
	prod: {
		// 連結するファイル
		src: [
			"src/js/_intro.js",
			"src/js/foo.js",
			"src/js/bar.js",
			"src/js/hoge.js",
			"src/js/_outro.js"
		],
		// 結果として生成されるJSファイル
		dest: “build/js/all.js”
	}
},
この手法はjQueryにも使われているようで
一般的な手法なようですね。。

今回はこちらの記事を参考にさせていただきました!!
・http://niwaringo.tumblr.com/post/42918032996/grunt-cli-grunt-contrib-concat

 

COMMENT