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



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

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

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

[javascript] 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’);
[/javascript]

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

[javascript] require(‘load-grunt-tasks’)(grunt);
[/javascript]

プラグインの最新化

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

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

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

[javascript] npm-check-updates -u && npm install
[/javascript]

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

[javascript] sudo npm install npm-check-updates -g
[/javascript]

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

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

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

[javascript] /**
* //複数あるファイルをまとめる
*/
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
}
}
});
[/javascript]

localServerとwatchを同時に動かす

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

[javascript] grunt.registerTask(“serve”, [“connect”, “watch”]);
[/javascript]

まとめ

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




コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください