[JavaScript] Sublime Text2からGruntのタスクを実行できるようにする

2013/05/23

こんにちは。きんくまです。

html関係のエディタはいまSublime Text2を使っています。
で、ビルドシステムのGruntを使って、watch使って、ファイルが保存されたらビルドする。とやってました。

・最初「おー、これすごい便利！」
・「あー、癖ですぐ保存しちゃうから、ビルド毎回しちゃってるー」
・「保存しただけでビルドしないで欲しいです、。」
・「あー、イライライライライライラ…」
・「ビルドしないで下さい。泣（懇願）」←イマココ

となってきました。
やっぱり、各ファイル保存して、「ここだ！」という自分の好きなタイミングでビルドしたい！
ま、そのやり方にずっと慣れちゃってるっていうのもあります。

そこで今回のエントリです。

今回のGruntfile.jsです。適当です。こんなのがあったと思ってください。

module.exports = function(grunt){
    grunt.loadNpmTasks('grunt-contrib-sass');
    grunt.loadNpmTasks('grunt-typescript');
    grunt.loadNpmTasks('grunt-contrib-clean');
    grunt.loadNpmTasks('grunt-notify');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.registerTask('default', 'default task', ['typescript:dev']);
    grunt.registerTask('release', ['clean', 'sass:release','typescript:release', 'uglify:release']);


    grunt.initConfig({
    	sass:{
    		dev:{
    			options:{
    				style: 'nested'
    			},
    			files:{
    				'src/css/xxx.css':'src/scss/xxx.scss'
    			}
    		},
    		release:{
                options:{
                    style: 'compressed'
                },
                files:{
                    'src/css/xxx.css':'src/scss/xxx.scss'
                }
    		}
    	},
    	typescript:{
    		dev:{
    			src:[
                    'src/ts/XXXXX.ts',
                    'src/ts/YYYYY.ts'
                    ],
                     
    			dest:'src/js/foo.js',
    			options:{
                    base_path:'src/ts',
                    target: 'es3',
    				sourcemap: true
    			}
    		},
            release:{
                src:[
                    'src/ts/XXXXX.ts',
                    'src/ts/YYYYY.ts'
                    ],
                dest:'src/js/foo.js',
                options:{
                    base_path:'src/ts',
                    target: 'es3',
                    sourcemap: false
                }
            }
    	},
        uglify: {
            release: {
                files: {
                    'src/js/xxxx.min.js': [
                        'src/js/foo.js',
                        'src/js/bar.js'
                    ]
                }
            }
        },
    	clean:{
    		dev:[
    			'src/js/*.map'
    		]
    	}
    });
}

Sublime Text2の設定

Tools > Build System > New Build System　で新規のビルドシステム設定ファイルを作ります。ファイルを置く場所は Packages/Userディレクトリ内

今回は、grunt.sublime-build という名前にしました。
ファイルの中身です。

{ 
	"cmd": ["grunt", "--no-color"], 
	"selector": ["gruntfile.js"], 
	"working_dir": "${project_path}", 
	"path": "/usr/local/bin:/usr/bin",

	"variants": [
		{
			"cmd": ["grunt", "clean", "--no-color"], 
			"working_dir": "${project_path}", 
			"path": "/usr/local/bin:/usr/bin",
			"name": "grunt clean"
		},
		{
			"cmd": ["grunt", "sass:dev", "--no-color"], 
			"working_dir": "${project_path}", 
			"path": "/usr/local/bin:/usr/bin",
			"name": "grunt sass build"
		},
		{
			"cmd": ["grunt", "release", "--no-color"], 
			"working_dir": "${project_path}", 
			"path": "/usr/local/bin:/usr/bin",
			"name": "grunt release build"
		}
	]
}

これを設定したあとに、Tools > Build Systemからgruntを選択します。
うまくいかなかったらアプリを立ち上げ直すといいかも。

variantsの外のところが通常のビルドコマンドから起動されるものです。（Command + B)
gruntというコマンドにひもづけられてます。この場合grunt側は、引数なしなので、defaultにひもづけられていて、

grunt.registerTask(‘default’, ‘default task’, [‘typescript:dev’]);

となっているので、typescript:devが実行されます。

残りのvariantsのところは、カスタムコマンドです。
Command + Shift + Pをしたあとに、nameで書いたところがインクリメンタルサーチ（みたいの？）で検索されます。
grunt clean だったら、「g c」とかすると、該当コマンドが一覧からしぼりこまれます。
grunt release buildだったら「relea」とか打ってるとしぼりこまれたり。

こんな感じにやっておけば、エディタ内から好きなときにsassだけビルドしたり、いらないファイル削除したりできて便利ですw。

参考サイトです。スバラシイです！どもです。

>> Sublime Text 2 OSX Grunt build system woe
>> Y.A.M の雑記帳: Sublime Text 2 で TypeScript をビルドする
 >> Specify and switch between ant targets in sublime text 2