この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
Gruntとは
弊社ブログでもすでに紹介していますが、Gruntとはnode.jsベースで作成されたビルドツールです。 最近v0.4がリリースされ、Coffee Scriptがデフォルトでサポートされました。 今回は、変更が検知されたCoffeeScriptファイルをコンパイル→UglifyJSで圧縮 という処理をGruntでやってみます。
環境構築方法
今回使用した動作環境は以下のとおりです。
- OS : MacOS X 10.7.4
- Node.js : v0.10.0
- npm : 1.2.14
- Grunt : 0.4
npmを使用してGruntをインストールしておきましょう。
% npm install -g grunt-cli
package.jsonとGruntfileを作成する
Grunt(0.4)を実行するためには、2つのファイルが必要です。 まずはpackage.jsonを作成しましょう。npmを使えば簡単に作成できます。 依存モジュールの定義をしておけるので、package.jsonを用意しておけば、他のユーザーが npm installするだけでモジュールのインストールができます。
% mkdir grunt-sample
% cd grunt-sample
% npm init
package.jsonを作成したら、gruntモジュールのインストールをしておきましょう。 --save-devオプションをつけると、package.jsonにそのモジュールが追加されます。
% npm install grunt --save-dev
% npm install grunt-coffee -save-dev
% npm install grunt-contrib-uglify -save-dev
% npm install grunt-contrib-watch -save-dev
grunt-sampleディレクトリに必要なディレクトリとファイルを作成しましょう。 coffee scriptのファイルを置くディレクトリ、コンパイルしたjsファイルを置くディレクトリ、 uglifyjsで圧縮したファイルを置くディレクトリを作成します。
% mkdir coffee
% mkdir js
% mkdir compress
そして、Gruntの動作を定義する、Gruntfile.coffeeを作成します。 watchタスクでcoffeescriptファイルの変更を検知し、コンパイルと圧縮を行います。
module.exports = (grunt) ->
pkg = grunt.file.readJSON 'package.json'
grunt.initConfig
watch:
files: ['coffee/**/*.coffee'],
tasks: ['coffee','uglify']
coffee:
compile:
options:
sourceMap: true
files: [
expand: true,
cwd: 'coffee/',
src: ['**/*.coffee'],
dest: 'js/',
ext: '.js'
]
uglify:
compress_target:
options:
sourceMap: (fileName) ->
fileName.replace /\.js$/, '.js.map'
files: [
expand: true,
cwd: 'js/',
src: ['**/*.js'],
dest: 'compress/',
ext: '.js'
]
grunt.loadNpmTasks 'grunt-contrib-coffee'
grunt.loadNpmTasks 'grunt-contrib-watch'
grunt.loadNpmTasks 'grunt-contrib-uglify'
coffeeディレクトリに適当なcoffee scriptファイルを作成し、保存してみてください。 コンパイルされ、圧縮されたファイルがcompressディレクトリに生成されます。
#coffee/foo.coffeeに作成したcoffee scriptファイル
sum = (array) ->
result = 0;
for i in array
result += i
result
array = new Array(1,2,3)
console.log "result=", sum(array)
まとめ
Gruntを使うと、いろいろな作業が自動化できてとても楽ですね。 面倒な作業な作業はすべて自動化して楽しましょう。
参考サイトなど
- 公式サイト: http://gruntjs.com/