WebStormでCoffeeScriptをGruntでコンパイルする

· by · in

遅ればせながらCoffeeScriptでそろそろJS書くようにしようと思ったので事始めのメモです。

前提

  1. Gruntがすでに使えるプロジェクトである。
  2. ファイル構成は下記
    project
├css
├js
│└scripts.js
├src
│├sass
│└coffee
│  └scripts.coffee
├Gruntfile.js
└package.json

プラグインのインストールと設定

WebStormでターミナル開いて下記を打つ。

npm install grunt-contrib-coffee --save-dev

Gruntfile.jsを開いて例えば下記のようにCoffeeScriptのコンパイル及びwatchでの監視を追加する。

module.exports = function (grunt) {
	var pkg = grunt.file.readJSON('package.json');
	grunt.initConfig({
		compass: {
			dist: {
				options: {
					config: 'config.rb'
				}
			}
		},
		//coffee追記
		coffee: {
			compile: {
				files: {
					'js/index.js': ['src/coffee/*.coffee']
				}
			}
		},
		//watchのfilesとtasksはカンマ区切りで追記
		watch: {
			files: ['src/sass/*.scss', 'src/coffee/*.coffee'],
			tasks: ['compass', 'coffee']
		}
	});
	var taskName;
	for (taskName in pkg.devDependencies) {
		if (taskName.substring(0, 6) == 'grunt-') {
			grunt.loadNpmTasks(taskName);
		}
	}
	grunt.registerTask('default', ['watch']);
};

WebStormで実行

gruntパネルかターミナルから実行し、coffeeフォルダ以下のファイルを適当にいじってコンパイルされればOK

筆者について

KaBuKi
ゲームとジョジョを愛するファミッ子世代。好きな言葉は「機能美」。
公私ともにWebサービスを作る系男子。
Tags: , ,