grunt入門

ビルドツールgruntの最初の入門サンプルを紹介します。

http://gruntjs.com/

まず、インストールを

sudo npm install -g generator-kraken

このコマンドはyo, grunt, bower, kerkenjsを一括にインストールできます。

gruntだけインストールしたい場合、このコマンドです。

npm install -g grunt-cli

インストールしたら、フォルダを作って、下記の二つのファイルを用意します。

package.json
Gruntfile.js


package.json

{
    "name": "my-project-name",
    "version": "0.1.0",
    "devDependencies": {
        "grunt": "~0.4.2",
        "grunt-contrib-concat": "~0.1.2",
        "grunt-contrib-watch": "~0.5.3",
        "grunt-contrib-qunit": "~0.1.1",
        "grunt-contrib-jshint": "~0.6.3",
        "grunt-contrib-nodeunit": "~0.2.0",
        "grunt-contrib-uglify": "~0.2.2"
    }
}

Gruntfile.js

'use strict';

module.exports = function (grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        uglify: {
            options: {
                banner: '/*! <%=pkg.name%> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
            },
            build100: {
                src: 'src/js/*.js',
                dest: 'dist/build100.min.js'
            }
        }
    });

    grunt.loadNpmTasks('grunt-contrib-jshint');
    grunt.loadNpmTasks('grunt-contrib-qunit');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-uglify');

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

#grunt実行
grunt or grunt uglify

このコマンドはuglifyプラグインを使って、buildフォルダにbuild100.min.jsを作成します。

他のプラグインの使い方は今回は割愛して、今後は紹介します。