Grunt 作業メモ

今までは結合と圧縮ぐらいしか使っていませんでしたが、モダンな開発環境を整えるべく、Gruntファイルを書き換えてみました。

buildディレクトリ以下で開発を行い、開発が終了したらdistディテクトリ以下に必要なファイルを書き出すという想定です。

Grunt.js

module.exports = function (grunt) {

  'use strict';

  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),

    // grunt-contrib-copy
    // 必要なファイルをdistにコピー
    copy: {
      dist: {
        files: [{
          expand: true,
          cwd: 'build/',
          src: ['*.html'],
          dest: 'dist/'
        }]
      }
    },

    // grunt-contrib-compass
    // compassファイルのビルド
    compass: {
      dev: {
        options: {
          config: 'build/config.rb',
          sassDir: 'build/sass',
          cssDir: 'build/assets/css'
        }
      },
      dist: {
        options: {
          config: 'build/config.rb',
          sassDir: 'build/sass',
          cssDir: 'dist/assets/css',
          environment: 'production'
        }
      }
    },

    // grunt-contrib-concat
    // jsファイルの結合
    concat: {
      dist: {
        src: [
          'build/assets/js/lib/Hige.js',
          'build/assets/js/lib/Boin.js',
          'build/assets/js/main.js'
        ],
        dest: 'build/assets/js/<%= pkg.name %>.concat.js'
      }
    },

    // grunt-contrib-uglify
    // 結合したjsファイルの圧縮
    uglify: {
      options: {
        banner: ''
      },
      dist: {
        files: {
          'dist/assets/js/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>']
        }
      }
    },

    // grunt-contrib-jshint
    // 結合するjsファイルの構文チェック
    jshint: {
      files: ['<%= concat.dist.src %>'],
      options: {
        jquery: true,
        browser: true,
        devel: true
      }
    },

    // grunt-contrib-watch
    // ファイルの監視
    watch: {
      compass: {
        files: ['build/sass/*.scss'],
        tasks: ['compass:dev']
      },
      js: {
        files: ['<%= concat.dist.src %>'],
        tasks: ['jshint', 'concat', 'uglify']
      }
    },

    // grunt-bower-task
    // ライブラリをdistにコピー
    bower: {
      dev: {
        options: {
          targetDir: 'build/assets/js/lib',
          layout: 'byType',
          install: true,
          verbose: false,
          cleanTargetDir: true,
          cleanBowerDir: false
        }
      },
      install: {
        options: {
          targetDir: 'dist/assets/js/lib',
          layout: 'byType',
          install: true,
          verbose: false,
          cleanTargetDir: true,
          cleanBowerDir: false
        }
      }
    },

    // grunt-contrib-connect
    // ローカルにサーバを立てる
    connect: {
      server: {
        options: {
          port: 9000,
          keepalive: false,
        hostname: '*',
          base: 'build'
        }
      }
    },

    // grunt-contrib-imagemin
    // 画像を圧縮してdistに書き出し
    imagemin: {
      dynamic: {
        files: [{
          expand: true,
          cwd: 'build/assets/img/',
          src: ['**/*.{png,jpg,gif}'],
          dest: 'dist/assets/img/'
        }]
      }
    },

    // grunt-autoprefixer
    // プレフィックスの追加＆削除
    autoprefixer: {
      options: {
        browsers: ['last 2 version', 'ie 9']
      },
      dev: {
        src: 'build/data/css/*.css'
      },
      dist: {
        src: 'dist/data/css/*.css'
      }
    },

    // grunt-usemin
    // 本番環境では圧縮したファイルを読み込むようにする
    usemin: {
      html: ['dist/*.html'],
      options: {
        root: '/',
        dirs: ['dist']
      }
    }
  });

  grunt.registerTask('default', ['jshint', 'concat', 'uglify', 'bower:install']);

  // 開発サーバを立ててファイルを監視（しているつもり）
  grunt.registerTask('server', ['bower:dev', 'connect', 'watch']);

  // 本番ファイル書き出し（しているつもり）
  grunt.registerTask('dist', ['jshint', 'connect', 'uglify', 'imagemin:dynamic', 'bower:install', 'autoprefixer:dist', 'copy:dist', 'usemin']);

  grunt.loadNpmTasks('grunt-contrib-copy');
  grunt.loadNpmTasks('grunt-contrib-compass');
  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-bower-task');
  grunt.loadNpmTasks('grunt-contrib-connect');
  grunt.loadNpmTasks('grunt-contrib-imagemin');
  grunt.loadNpmTasks('grunt-autoprefixer');
  grunt.loadNpmTasks('grunt-usemin');
};

package.json

{
    "name": "main",
    "version": "0.0.1",
    "description": "hello world.",
    "devDependencies": {
        "grunt-contrib-copy": "~0.5.0",
        "grunt-contrib-compass": "~0.8.0",
        "grunt-contrib-jshint": "~0.1.1",
        "grunt-contrib-concat": "~0.1.2",
        "grunt-contrib-uglify": "~0.1.1",
        "grunt-contrib-watch": "~0.2.0",
        "grunt-bower-task": "~0.3.4",
        "grunt-contrib-connect": "~0.8.0",
        "grunt-contrib-imagemin": "~0.7.1",
        "grunt-autoprefixer": "~0.7.5",
        "grunt-usemin": "~2.0.0"
    }
}

とりあえず、当面はこんな感じで開発してみます。