[JavaScript] Gruntについてのメモ « きんくまデザイン

[JavaScript] Gruntについてのメモ

2013/05/16

こんにちは。きんくまです。
Objective-Cの入門はしばらくお休みにして、JSのメモなどを。

Gruntというビルドツールがあるみたいです。

最近、sassとかTypeScriptとか、こういうのなんていうのかしらないんだけど（メタ言語というの？）、上位言語というか、そういうのいくつか出ております。
それをコマンドラインでひとつずつコンパイルしても良いのですが、「それまとめてコンパイルしちゃる！」みたいのがGruntというものらしいです。
コンパイル以外にもファイルのmin化とか、いろいろできるみたい。

詳しくはこちらで。

Web制作で面倒な作業を自動化するビルドツール、Grunt v0.4 入門

で、自分でもsassとTypeScript管理したいと思って作ったGruntfileをメモとしてアップ。

watchに書かれているfilesに変更があると、tasksにかかれているプロパティを実行します。

module.exports = function(grunt){
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-typescript');
    grunt.loadNpmTasks('grunt-contrib-sass');
 
    grunt.initConfig({
        typescript:{
            base:{
                src: ['ts/*.ts'],
                dest: 'js/main.js'
            }
        },
        sass:{
            dist:{
                files:{
                    'main.css':'scss/main.scss'
                },
                options:{
                    style:'compressed'
                }
            }
        },
        watch:{
            scss:{
                files:['scss/*.scss'],
                tasks:['sass']
            },
            scripts:{
                files:['ts/*.ts'],
                tasks:['typescript']
            }
        }
    });
};