WEBアプリケーション研究室 開発ノート TOP

WEBアプリケーション研究室 開発ノート 2013年07月

スポンサーサイト

-------- --:--

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

    このエントリーをはてなブックマークに追加

node.jsのgruntというmoduleがすごい便利です。
http://gruntjs.com/

javascriptの複数のファイルと連結したり、min化したり、あるいはCSSでLESSとかStrylusのレンダリングをファイル保存時に自動でしてしまうことができます。

英語が分かる方は本家を読んで下さい。日本語で紹介してくださってるブログは色々ありますが、verで色々変わってうまく動かないので、メモしておきます。対象のバージョンは0.4.1です。node.jsとnpmが使える状態になってるのが前提です。node.jsのバージョンはgrunt的には>= 0.8.0らしいですが、今回はv0.10.13で試してます。

まずはインストール。コマンドとgrunt本体は別々にインストールするようになりました。まずはコマンドをインストールしましょう。


npm install -g grunt-cli
続いて、プロジェクトフォルダのルートにpackage.jsonを作成します。

//package.json
{
"name": "slide-over-view",
"version": "0.1.0",
"devDependencies": {
}
}
package.jsonはgruntだけ使うならぶっちゃけいらないのですが、プロジェクトをgitなどで管理するときにインストールしたgruntやgruntのtaskをリポジトリに入れたくないと思います。そのとき、devDependenciesにそれらのmoduleが記述してあるとnpm intallのコマンドを打つだけでサッとインストール出来ます。では、grunt本体をインストールします。本体は-gオプション無しで、プロジェクトのローカルフォルダにインストールする必要があります。devDependenciesはインストール時のオプション--save-devで自動で書き込まれます。

npm install grunt --save-dev
続いてタスクをインストールします。今回はconcat(ファイルの連結)とuglify(min化)あと、変更を監視するwatchの3つのタスクを使います。0.4以降のバージョンではタスクは個別にインストールするようになったようです。上記3つのタスクをインストールしましょう。--save-devを忘れずに。

npm install grunt-contrib-concat --save-dev
npm install grunt-contrib-uglify --save-dev
npm install grunt-contrib-watch --save-dev
念のためpackage.jsonを確認してみるとsave-devオプションがうまく動いてることが確認できるはずです。

{
"name": "slide-over-view",
"version": "0.1.0",
"devDependencies": {
"grunt": "~0.4.1",
"grunt-contrib-concat": "~0.3.0",
"grunt-contrib-uglify": "~0.2.2",
"grunt-contrib-watch": "~0.5.0"
}
}
最後にgruntの設定ファイルであるGruntfile.jsを作成します。

//Gruntfile.js
module.exports = function(grunt) {

var banner = '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd HH:MM") %> */\n';
var jsFiles = ['src/rect/*.js', 'src/*.js'];

// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
options: {
banner: banner
},
dist: {
src: jsFiles,
dest: 'lib/jquery.slide-over-view.js'
}
},
uglify: {
options: {
banner: banner
},
dist: {
src: ['lib/jquery.slide-over-view.js'],
dest: 'lib/jquery.slide-over-view.min.js'
}
},
watch: {
scripts: {
files: jsFiles,
tasks: ['concat', 'uglify']
}
}
});

grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');

// Default task.
grunt.registerTask('default', ['watch']);
};
見ればわかると思うので細かい説明は割愛します。各タスク直下のプロパティ名、distとかscriptsは任意の名前が付けられます。使用するタスクをgrunt.loadNpmTasksで読み込む必要があります。また、最後のgrunt.registerTask、defaultという名前でタスクのエイリアスを登録する命令です。二番目の引数に配列が指定できるのがポイントで、複数のタスクを順番に実行するときに便利です。今回はwatchタスクの中で['concat', 'uglify']を実行してるので、実際に実行する時は

grunt watch
で実行できるので必要ないといえば必要ありませんが、

grunt
とタスク名を省略した時にdefaultというタスクが実行されるので登録しました。

今回CSS系は試しませんでしたが、LESSやstylusのタスクもあります。
https://github.com/gruntjs/grunt-contrib-less
https://github.com/gruntjs/grunt-contrib-stylus

とにかく大量にpluginがあるようです。
http://gruntjs.com/plugins

    このエントリーをはてなブックマークに追加
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。