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

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

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

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

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

プラグインの最新化

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

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

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

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

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

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

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

/**
* 出力先の定義
*/
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
}
}
});
[/javascript]

localServerとwatchを同時に動かす

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

まとめ

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