GruntでCoffee Scriptのコンパイル&Uglifyで圧縮
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/