Grunt入門

目的

ケーススタディで学ぶタスクの追加と実行

前提

ソフトウェア	バージョン	備考
OS X	10.8.5
grunt	0.1.13

構成

• セットアップ
• ケース１：JavaScript開発でのデプロイ時の構文チェック、結合など
• ケース２：CoffeeScriptスクリプトのコンパイル、圧縮

詳細

セットアップ

$ npm install -g grunt-cli
$ cd grunt_introduction/case01
$ npm init
$ npm install --save-dev grunt
$ touch Gruntfile.js
$ mkdir src
$ mkdir dest

Gruntfile.js

module.exports = function (grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    dirs: {
      src: 'src',
      dist: 'dest',
    },
  });
}

ケース１：JavaScript開発でのデプロイ時の構文チェック、結合など

よく使う情報をまとめる

ソースコードの構文チェック

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

Gruntfile.js

module.exports = function (grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    dirs: {
      src: 'src',
      dist: 'dest',
    },
    jshint: {
      beforeconcat: ['<%= dirs.src %>/js/*.js'],
      afterconcat: ['<%= dirs.dest %>/js/*.js']
    }
  });

  grunt.loadNpmTasks('grunt-contrib-jshint');
}

$ grunt jshint

ソースコードの結合

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

case01/Gruntfile.js

module.exports = function (grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    dirs: {
      src: 'src',
      dest: 'dest',
    },
    jshint: {
      beforeconcat: ['<%= dirs.src %>/js/*.js'],
      afterconcat: ['<%= dirs.dest %>/js/*.js']
    },
    concat: {
      js: {
        src: ['<%= dirs.src %>/js/*.js'],
        dest: '<%= dirs.dest %>/js/<%= pkg.name %>.js',
      }
    }
  });

  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.loadNpmTasks('grunt-contrib-concat');
};

$ grunt jshint:beforeconcat
$ grunt concat
$ grunt jshint:afterconcat

ライセンスコメントの挿入

case01/Gruntfile.js

・・・
concat: {
  options: {
    banner: '/*! some copyright information here */',
  },
・・・

結合したソースコードの構文チェック

$ grunt jshint:afterconcat

ソースコードの圧縮

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

case01/Gruntfile.js

module.exports = function (grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    dirs: {
      src: 'src',
      dest: 'dest',
    },
    jshint: {
      beforeconcat: ['<%= dirs.src %>/js/*.js'],
      afterconcat: ['<%= dirs.dest %>/js/*.js']
    },
    concat: {
      options: {
        banner: '/*! some copyright information here */',
      },
      js: {
        src: ['<%= dirs.src %>/js/*.js'],
        dest: '<%= dirs.dest %>/js/<%= pkg.name %>.js',
      }
    },
    uglify: {
      options: {
        banner: '/*! some copyright information here */',
      },
      dest: {
        files: {
          '<%= dirs.dest %>/js/<%= pkg.name %>.min.js':
          '<%= dirs.dest %>/js/<%= pkg.name %>.js'
        }
      }
    }
  });

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

$ grunt jshint:beforeconcat
$ grunt concat
$ grunt jshint:afterconcat
$ grunt uglify

SourceMapの追加

case01/Gruntfile.js

module.exports = function (grunt) {
・・・
      js: {
        src: ['<%= dirs.src %>/js/*.js'],
        dest: '<%= dirs.dest %>/js/<%= pkg.name %>.js',
        }
・・・

タスクをまとめる

case01/Gruntfile.js

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

  grunt.registerTask('build', 'Build JavaScript Files', [
    'jshint:beforeconcat',
    'concat',
    'jshint:afterconcat',
    'uglify'
  ]);
};

ソースコードの変更の監視

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

case01/Gruntfile.js

module.exports = function (grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    dirs: {
      src: 'src',
      dest: 'dest',
    },
    jshint: {
      beforeconcat: ['<%= dirs.src %>/js/*.js'],
      afterconcat: ['<%= dirs.dest %>/js/*.js']
    },
    concat: {
      options: {
        banner: '/*! some copyright information here */',
      },
      js: {
        src: ['<%= dirs.src %>/js/*.js'],
        dest: '<%= dirs.dest %>/js/<%= pkg.name %>.js',
      }
    },
    uglify: {
      options: {
        banner: '/*! some copyright information here */',
        sourceMap: true
      },
      dest: {
        files: {
          '<%= dirs.dest %>/js/<%= pkg.name %>.min.js':
          '<%= dirs.dest %>/js/<%= pkg.name %>.js'
        }
      }
    },
    watch: {
      files: ['<%= dirs.src %>/js/*.js'],
      tasks: ['build'],
    }
  });

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

  grunt.registerTask('build', 'Build JavaScript Files', [
    'jshint:beforeconcat',
    'concat',
    'jshint:afterconcat',
    'uglify'
  ]);
};

$ grunt watch

ケース２：CoffeeScriptスクリプトのコンパイル、圧縮

よく使う情報をまとめる

CoffeeScriptのコンパイル

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

case02/Gruntfile.js

module.exports = function(grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    dirs: {
      src: 'src',
      dest: 'dest',
    },
    coffee: {
      compile: {
        files: {
          '<%= dirs.dest %>/js/<%= pkg.name %>.js':
          '<%= dirs.src %>/coffee/*.coffee'
        }
      }
    }
  });

  grunt.loadNpmTasks('grunt-contrib-coffee');
};

$ grunt coffee

ソースコードの圧縮

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

case02/Gruntfile.js

module.exports = function(grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    dirs: {
      src: 'src',
      dest: 'dest',
    },
    coffee: {
      compile: {
        files: {
          '<%= dirs.dest %>/js/<%= pkg.name %>.js':
          '<%= dirs.src %>/coffee/*.coffee'
        }
      }
    },
    uglify: {
      options: {
        banner: '/*! some copyright information here */',
      },
      dest: {
        files: {
          '<%= dirs.dest %>/js/<%= pkg.name %>.min.js':
          '<%= dirs.dest %>/js/<%= pkg.name %>.js'
        }
      }
    }    
  });

  grunt.loadNpmTasks('grunt-contrib-coffee');
  grunt.loadNpmTasks('grunt-contrib-uglify');
};

$ grunt coffee
$ grunt uglify

SourceMapの追加

case02/Gruntfile.js

module.exports = function(grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    dirs: {
      src: 'src',
      dest: 'dest',
    },
    coffee: {
      compile: {
        files: {
          '<%= dirs.dest %>/js/<%= pkg.name %>.js':
          '<%= dirs.src %>/coffee/*.coffee'
        }
      }
    },
    uglify: {
      options: {
        banner: '/*! some copyright information here */',
        sourceMapIn: '<%= dirs.dest %>/js/<%= pkg.name %>.js.map'
      },
      dest: {
        files: {
          '<%= dirs.dest %>/js/<%= pkg.name %>.min.js':
          '<%= dirs.dest %>/js/<%= pkg.name %>.js'
        }
      }
    }    
  });

  grunt.loadNpmTasks('grunt-contrib-coffee');
  grunt.loadNpmTasks('grunt-contrib-uglify');
};

タスクをまとめる

case02/Gruntfile.js

module.exports = function(grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    dirs: {
      src: 'src',
      dest: 'dest',
    },
    coffee: {
      compile: {
        files: {
          '<%= dirs.dest %>/js/<%= pkg.name %>.js':
          '<%= dirs.src %>/coffee/*.coffee'
        }
      }
    },
    uglify: {
      options: {
        banner: '/*! some copyright information here */',
        sourceMapIn: '<%= dirs.dest %>/js/<%= pkg.name %>.js.map'
      },
      dest: {
        files: {
          '<%= dirs.dest %>/js/<%= pkg.name %>.min.js':
          '<%= dirs.dest %>/js/<%= pkg.name %>.js'
        }
      }
    }    
  });

  grunt.loadNpmTasks('grunt-contrib-coffee');
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.registerTask('build','Build CoffeeScript Files',[
    'coffee',
    'uglify',
  ]);
};

$ grunt build

ソースコードの変更の監視

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

case02/Gruntfile.js

module.exports = function(grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    dirs: {
      src: 'src',
      dest: 'dest',
    },
    coffee: {
      compile: {
        files: {
          '<%= dirs.dest %>/js/<%= pkg.name %>.js':
          '<%= dirs.src %>/coffee/*.coffee'
        }
      }
    },
    uglify: {
      options: {
        banner: '/*! some copyright information here */',
        sourceMapIn: '<%= dirs.dest %>/js/<%= pkg.name %>.js.map'
      },
      dest: {
        files: {
          '<%= dirs.dest %>/js/<%= pkg.name %>.min.js':
          '<%= dirs.dest %>/js/<%= pkg.name %>.js'
        }
      }
    },
    watch: {
      files: ['<%= dirs.src %>/js/*.js'],
      tasks: ['build'],
    }
  });

  grunt.loadNpmTasks('grunt-contrib-coffee');
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.registerTask('build','Build CoffeeScript Files',[    
    'coffee',
    'uglify',
  ]);
};

$ grunt watch

参照

• JavaScriptエンジニア養成読本