5 LOG

Gruntを使ったプロジェクトの自動化。もうCodeKitもMAMPもいらないよ。

image

Grunt を使ったwebsite製作用のデフォルトセットを一式作ってみた

ソースコード一式

準備

下記がインストールされていない場合は、要インストール

  • node.js
  • grunt-cli

node.js のインストール

node.jsをインストール nodebrewを使って管理する

grunt-cli のインストール

grunt-cli はgrunt を実行するためだけのパッケージなので、「-g」でグローバルにインストールしておく

$ npm install -g grunt-cli

Grunt のインストール

Grunt を実行するには下記が必要

  • package.json
    (プロジェクトの情報を記述した設定ファイル)
  • Grunt.js
  • Gruntプラグイン
    (sassのコンパイルなど、Gruntで実行するタスク)
  • Gruntfile.js
    (Gruntで実行するタスクを記述したファイル)

package.jsonを用意する

まずは、プロジェクトの名前や、必要なモジュールをまとめたpackege.json をプロジェクトのディレクトリに用意する。
package.jsonは、npm initで対話形式で簡単に作成できる。
もしくは自分でスクラッチ

npm initで作成

$ npm init

npm init で項目に答えて作成

entry point にはGruntfile.js または、Grunt.coffeeを入力。

{
  "name": "sample",
  "version": "0.0.1",
  "description": "grunt test",
  "main": "Gruntfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

これでpckage.jsonのベースが出来たので、このpackege.jsonに、プロジェクトで必要なGruntのバージョン、プラグインを追記していく。
追記は、Gruntや各プラグインをインストールする際に「–save-dev」オプションを使って自動的に記入する。

Gruntをinstall

$ npm install grunt --save-dev

「–save-dev」を使うとpackege.json にモジュール名を追加してくれる。

package.json を見ると、devDependencies に”grunt”: “‾0.4.2″が追記されている。

{
  "name": "sample",
  ...

  "devDependencies": {
    "grunt": "~0.4.2"
  }
}

Gruntで実行するプラグインをインストール

Grunt で実行するタスクを用意する。
タスクはプラグインになっているので、必要なプラグインをインストールする。
プラグインのインストールも「–save-dev」オプションを使って、packege.json にプラグイン名、バージョンを自動的に記入。

Grunt Plugins

自動化したいタスクは、

  • ファイルの監視(grunt-contrib-watch)
  • jshint(grunt-contrib-jshint)
  • jsファイルの圧縮(grunt-contrib-uglify)
  • ローカルサーバー接続(grunt-contrib-connect)
  • compass(grunt-contrib-compass)
  • buildファイルの作成(grunt-contrib-copy、grunt-contrib-clean)

各モジュールを「–save-dev」オプションでインストール

$ npm install grunt-contrib-watch grunt-contrib-jshint grunt-contrib-uglify grunt-contrib-connect grunt-contrib-compass grunt-contrib-copy grunt-contrib-clean --save-dev

インストールが完了後、package.jsonにモジュール名とバージョンが記入されているか確認。

{
  "name": "sample",
  ...
  "devDependencies": {
    "grunt": "~0.4.2",
    "grunt-contrib-watch": "~0.5.3",
    "grunt-contrib-compass": "~0.7.0",
    "grunt-contrib-uglify": "~0.2.7",
    "grunt-contrib-jshint": "~0.8.0",
    "grunt-contrib-connect": "~0.6.0",
    "grunt-contrib-copy": "~0.5.0",
    "grunt-contrib-clean": "~0.5.0"
  }
}

packege.json をプロジェクトのメンバーで共有すれば、同じ環境でのgruntが実行出来る。
package.json を受け取った場合、

$ npm install

で、package.json に記入されているgrunt.js、各プラグインがインストール出来る。

Gruntで実行するタスクをGruntfile.jsに書く

Grunt でどんなタスクを実行するか書いていく。
Gruntfile.jsのフォーマットは

module.exports = function (grunt) {

  // タスクの設定
  grunt.initConfig({

  });

  // 読み込むプラグイン
  grunt.loadNpmTasks('grunt-xxx');

  // タスクの登録
  grunt.registerTask('default', [ 'xxx' ]);

};

grunt.initConfig(タスクの設定)は
Configuring tasks
参照。

今回作成したGluntfile.jsは

module.exports = function (grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),

    // ローカルサーバー設定
    connect: {
      options: {
      },
      livereload: {
        options: {
          base: 'dev/',// rootを設定
          open: true
        }
      }
    },
    uglify: {
      options: {
        banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
      },
      dist: {
        files: {
          'dist/js/script.js': ['dev/js/script.js']
        }
      }
    },
    compass: {
      dist: {
        options: {
          config: 'config.rb'
        }
      }
    },
    jshint: {
      options: {
        jshintrc: '.jshintrc'
      },
      all: ['dev/js/*.js']
    },
    // 公開用にdistフォルダにコピー
    copy: {
      dist: {
        expand: true,
        cwd: 'dev/',
        dest: 'dist',
        src: '**'
      }
    },
    // 公開フォルダから不要なデータを削除
    clean: {
      build: ['dist/_sass']
    },
    // ファイル監視
    watch: {
      options: {
        livereload: true
      },
      js: {
        files: ['dev/js/*.js'],
        tasks: ['jshint']
      },
      compass: {
        files: ['dev/_sass/*.scss'],
        tasks: ['compass']
      },
      livereload: {
        files: ['dev/index.html']
      }
    }
  });


  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-contrib-compass');
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.loadNpmTasks('grunt-contrib-imagemin');
  grunt.loadNpmTasks('grunt-contrib-connect');
  grunt.loadNpmTasks('grunt-contrib-copy');
  grunt.loadNpmTasks('grunt-contrib-clean');

  grunt.registerTask('default', ['connect', 'watch']);
  grunt.registerTask('dev', ['connect', 'watch']);
  grunt.registerTask('css', ['compass']);
  grunt.registerTask('build', ['css', 'copy', 'clean', 'uglify']);
};

webサイトの製作用のフォルダ構成を想定

  • dev:開発用フォルダ
  • dist:公開用フォルダ

制作中は、プロジェクトフォルダでgruntを実行

$ grunt

実行すると、ブラウザが立ち上がりhttp://localhost:8000 にアクセスし
dev/index.htmlが表示される

ファイルが更新されると、livereloadにより、自動的にブラウザがリロードされる。
ただし、現状はchromeのみで、chromeの拡張プラグインが必要

Chrome LiveReload

公開用のデータをまとめる場合は,

$ grunt build

で、distフォルダができる。

課題

ブラウザ拡張なしで、他のブラウザでもlivereroadしたいのだが。

参考