Gruntで運用するときにより便利になるTips

Gruntで実行しているのはプロジェクトが変わっても、「だいたい」一緒だったりするのですが、この「だいたい」が曲者で結局gruntfile.jsを書きなおさなくてはいけなかったりします。
うまく流用出来たり、メンテナンス性を高められる様なTipsをご紹介します。

grunt-tasksを使ってタスクを一気に読み込む

Gruntをいじっていると面倒なのが、いちいち読み込まなきゃいけない「grunt.loadNpmTasks(‘hoge’);」タスクが増えれば増えるほどめんどくさいです。
場合によっては、新しいタスクを入れなくてはいけないこともあり、さらにめんどくさいです。

grunt.loadNpmTasks('grunt-contrib-sass');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-contrib-livereload');
    grunt.loadNpmTasks('grunt-contrib-csslint');
    grunt.loadNpmTasks('grunt-csscomb');
    grunt.loadNpmTasks('grunt-devtools');

これを一行で済ませてくれるのが、 load-grunt-tasksです。
これをインストールしておけば、タスクを読み込ませる部分はいちいち書かなくても、この一行をかけばOKです。

require('load-grunt-tasks')(grunt);

プラグインの最新化

ローカルで開発してると、gruntを別のプロジェクトでも流用しちゃったりするのですが、そうするとプラグインが古いままだったりします。

gruntは便利なのですが、プラグインが最新かとてもわかりづらいです。
1つ1つ調べると時間がかかります。

npm-check-updatesを使えば最新かも出来て便利です。

npm-check-updates -u && npm install

グローバルにインストールした方が便利だったりするので、下記コマンドの方がオススメ

sudo npm install npm-check-updates -g

gruntfileでは、変数をうまく使う

gruntfileは設定ファイルっぽいので、あまり変数などを意識せずに書いてしまうことも多いのですが、そうすると、ファイルが追加されたり、ディレクトリが変わった時に大変だったりします。

例えばいくつかのjsファイルをつなげる場合などで、ファイルが複数ある場合はarryaで変数を作ってあげて、流用するのが良いですし、出力先も定義しておくと、後から何か変更があった際でも対応出来ます。

/**
 * //複数あるファイルをまとめる
 */
var jsFileList = [
	'js/helpers/helpers.js',
	'js/helpers/console.js',
	'js/script.js'
];
 
/**
 * 出力先の定義
 */
var distDir = 'js/dist/';
 
/**
 * 出力するファイルの名の名前の定義
 */
var jsFile = 'app.min.js';
 

grunt.initConfig({
	pkg: require('./package'),
 
	//こんな感じでまとめたファイルを呼び出す 
	jshint: {
		all: jsFileList,
		options: {
			jshintrc: '.jshintrc'
		}
	},
 
	//どこにどんなファイルを出力するかもラクになります
	uglify: {
		options: {
			sourceMap: distDir + jsFile + '.map',
			sourceMappingURL: jsFile +'.map'
		},
 
		js: {
			src: jsFileList,
			dest: distDir + jsFile
		}
	}
});

localServerとwatchを同時に動かす

Grunt connectでLocalServerを建てると色々便利なのですが、そうすると、watchが動かなくなってしまいます。
gruntにある「serve」を使うと同時に動かせます。

grunt.registerTask("serve", ["connect", "watch"]);

まとめ

なるべくフロントエンドのエンジニアの方皆様に有効そうなtipsをご紹介しました〜。
こんな方法で運用してる!っていうのがあれば、ぜひぜひツイッターでもコメントでもいただければと思います。
ではでは

Leave a Comment

お問い合わせ

お仕事の依頼や何か質問などあれば、こちらからお願いします〜。

Not readable? Change text.

Start typing and press Enter to search