カテゴリー別アーカイブ: Grunt

Grunt

GruntとはNode.jsを利用した, フロントエンドまわり (JavaScriptやCSS) のタスク自動化ツールです.

標準の機能だけでできることは少ないですが, プラグインを利用することで様々なタスクを自動化することができます.

1. Node.jsのインストール

Node.jsを利用するので, こちらのサイトからダウンロードしてインストールしておきます.

2. Gruntのインストール

$ sudo npm install -g grunt-cli

3. プロジェクトのディレクトリでpackage.jsonを作成する

$ npm init

4. プロジェクトのディレクトリでGruntをインストールする

$ npm install --save-dev grunt

5. Gruntfile.jsの作成

タスクを記述するGruntfile.jsを作成します.
以下は, Gruntfile.jsのテンプレートです.

module.exports = function(grunt) {
    'use strict';

    // Config
    grunt.initConfig({
    });

    // Plugins
    grunt.loadNpmTasks();

    // Task
    grunt.registerTask();
};

例えば,  grunt-contrib-uglifyというプラグインを利用して, JavaScriptのファイルを圧縮するタスクを自動化する場合…

まずは, プラグインをインストールしておきます.

$ npm install --save-dev grunt-contrib-uglify

そして, Gruntfile.jsは以下のような記述になります.

module.exports = function(grunt) {
    'use strict';

    // Config
    grunt.initConfig({
        // In the case of using package.json
        pkg: grunt.file.readJSON('package.json'),
        uglify: {
            target: {
                options: {
                    sourceMap: true,
                    sourceMapName: 'sample.js.map'
                },
                files: {
                   'sample.min.js':['sample.js']
                }
            }
        }
    });

    // Plugins
    grunt.loadNpmTasks('grunt-contrib-uglify');

    // Task
    grunt.registerTask('default', ['uglify']);
};

あとは, コマンドラインでgruntを実行すれば, sample.jsを圧縮したsample.min.jsが生成されます.

$ grunt
Running "uglify:target" (uglify) task
>> 1 sourcemap created.
>> 1 file created.

Done, without errors.

プラグインの記述やオプションはそのドキュメントに記載されているのでそれを参考にしてください.