Skip to content

Instantly share code, notes, and snippets.

@konitter
Last active December 13, 2015 22:18
Show Gist options
  • Save konitter/4983217 to your computer and use it in GitHub Desktop.
Save konitter/4983217 to your computer and use it in GitHub Desktop.
Grunt(v0.4.0)導入メモ

Grunt(v0.4.0)導入メモ

昨日2/18についにGruntの0.4.0がリリースされた。
自分の環境もアップグレードしたのでその導入メモ。

リリース発表の記事はこちら。
Grunt 0.4.0 released - Grunt: The JavaScript Task Runner

インストール

詳細はこちらのページを参照。
Getting started - Grunt: The JavaScript Task Runner

すでに0.3系をインストールしてる人は以下でグローバルからgruntをアンインストール。

$ npm uninstall -g grunt

次に0.4から使うコマンドラインインターフェイスをグローバルにインストール。

$ npm install -g grunt-cli

0.4系を試すのにすでにgrunt-cliをインストール済みの人は、fオプションで上書き。
そもそもgrunt-cliがv0.1.6ならこの操作は不要。

$ npm install -fg grunt-cli

インストールできたら、以下でバージョン確認。

$ grunt --version
grunt-cli v0.1.6
grunt v0.4.0

今ならこうなるはず。

環境構築

グローバルにインストールするgrunt-cliは、gruntコマンドを実行するだけのインターフェイスなので、gruntプラグインはもちろん、grunt本体もローカルにインストールする。

まずはこんな感じのpackage.jsonをプロジェクトディレクトリに用意。

{
  "name": "grunt-test",
  "version": "0.0.1",
  "author": "konitter",
  "devDependencies": {}
}

そしてgrunt本体および各種gruntプラグインを--save-devを付けて一気にインストール。以下は一例。

$ npm install grunt grunt-contrib-watch grunt-contrib-concat grunt-contrib-cssmin grunt-styleguide --save-dev

するとpackage.jsonがこうなる。

{
  "name": "grunt-test",
  "version": "0.0.1",
  "author": "konitter",
  "devDependencies": {
    "grunt-contrib-concat": "~0.1.2",
    "grunt-contrib-cssmin": "~0.4.1",
    "grunt-contrib-watch": "~0.2.0",
    "grunt-styleguide": "~0.2.1",
    "grunt": "~0.4.0"
  }
}

あとはGruntfile.jsを作ってごにょごにょする。

Gruntfile.jsの書き方などについてはこちらを参照。
Sample Gruntfile - Grunt: The JavaScript Task Runner

ToDo

GruntでRooleを自動化。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment