Grunt - 闘うITエンジニアの覚え書き

SCSS や minify などを行うWebクライアント(js、css) 用のビルドツール
ファイルの監視機能によりminifyなどの自動化が行える。

Node.js インストール †

https://nodejs.org/ から node.js をインストール

grunt-cli インストール †

npm install -g grunt-cli

プロジェクト用ディレクトリを作成し移動 †

mkdir example_grunt
cd example_grunt

package.json の作成 †

npm init

※聞かれる質問は全部 [Enter] 押下でも良い。

プロジェクトフォルダ配下に grunt をインストール †

npm install grunt --save-dev

※インストールが成功すると配下に node_modules フォルダが出来る。

プラグインの一括インストール †

npm install grunt-contrib --save-dev

※grunt-contrib-sass などのように個別にインストールも可能。

Gruntの設定ファイルは、JSON形式で記述する。

例）ログを出力するだけのデフォルトタスク †

module.exports = function(grunt) {
    grunt.registerTask('default', 'testlog', function() {
        grunt.log.write('test log!!!').ok();
    }); 
}; 

例）js、cssのminify †

module.exports = function(grunt) {

    // タスク定義
    grunt.initConfig({
        concat: {
            files: {
                src : 'js/*.js',
                dest: 'js-all.js'
            }   
        },  
        uglify: {
            dist: {
                files: {
                    'js-all-min.js': 'js-all.js'
                    // 'js-all-min.js': 'js/*.js'                              // concat と minify を一気に行う事も可
                    // 'js-all-min.js': ['js/test1.js', 'js/test2.js']   // 配列でファイルを複数指定も可
                }   
            }   
        },  
        cssmin: {
            css : { 
                src  : 'css/*.css',
                dest : 'css-all-min.css'
            }   
        },  
        watch: {
            js: {
                 files: 'js/*.js'
                ,tasks: ['concat', 'uglify']
            },  
            css: {
                 files: 'css/*.css'
                ,tasks: ['cssmin']
            }   
        }   
    }); 

    // プラグインの読み込み
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-cssmin');
    grunt.loadNpmTasks('grunt-contrib-watch');

    // デフォルトタスクの指定
    grunt.registerTask('default', ["watch"]);
}; 

デフォルトタスクの実行 †

grunt

タスク名を指定して実行 †

grunt watch