クライアントサイド開発に便利な Gruntを 0.4にアップグレード

memo

Grunt v0.4がリリースされて、しばらく経過したけどやっと機会ができたのでアップグレードしてみた。

Grunt 0.4 変更点

ドキュメントまんまなんですが、grunt 0.4で変わったことをざっくりまとめてみた。

  • node >= 0.8.0 が必須

  • 0.3系のmoduleは0.4系にアップグレード対応しないといけない

  • プロジェクトルートに置かれたpackage.jsonでnpm moduleを管理

  • grunt はプロジェクトごとにローカルにインストールするようになった

  • grunt-cliのみをグローバルにインストールすればいい。grunt-cliインストールしてgruntコマンドが使用できる。

  • いままで最初から準備されていたコアタスク(init,lint,minなど)はすべてmoduleとなった。

    concat → grunt-contrib-concat plugin
    init → stand-alone grunt-init utility
    lint → grunt-contrib-jshint plugin
    min → grunt-contrib-uglify plugin
    qunit → grunt-contrib-qunit plugin
    server → grunt-contrib-connect plugin
    test → grunt-contrib-nodeunit plugin
    watch → grunt-contrib-watch plugin
    また、moduleとなったので、loadNpmTasksで読込む必要がある。

  • これまでgrunt.jsだったファイルがGrunt.jsまたはGrunt.coffeeになる。タスクがcoffeeの場合は自動でコンパイルされる

  • Gruntテンプレートが変更されてconfigタスクの記法がかわった。templateはLo-Dash templateで処理されるっぽい。
    ということで、<% %>形式がつかえるようになる。

    <config:prop.subprop> → <%= prop.subprop %>
    <json:file.json> → grunt.file.readJSON(‘file.json’)
    <file_template:file.js> → grunt.template.process(grunt.file.read(‘file.js’))

  • alias taskがArray形式に変更

    // v0.3.x (old format)
    grunt.registerTask(‘default’, ‘jshint nodeunit concat’);

    // v0.4.x (new format)

    grunt.registerTask(‘default’, [‘jshint’, ‘nodeunit’, ‘concat’]);

  • APIも数多く変更された。

ということでアップグレーとしてみる。

Getting Started / Upgrade

とりあえず、現在インストールされているgruntを削除
[shell]
$ npm uninstall -g grunt
[/shell]

つづいて、CLIをグローバルにinstall
[shell]
$ npm install -g grunt-cli
[/shell]

これではじめてgruntコマンドが使用できます。

package.jsonを作成する。
package.jsonの情報をもとに　プロジェクト毎にnpmのmoduleがインストールされる。
moduleのバージョンを固定することでstableな開発環境を維持できる。

[javascript]
{ "name": "my-project-name",
"version": "0.1.0",
"devDependencies": {
"grunt": "0.4.0",
"grunt-contrib-jshint": "0.1.1",
"grunt-contrib-nodeunit": "~0.1.2"
}
} [/javascript]

ほかにもnpmコマンドで作成することもできます。

[shell]
$npm init

npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sane defaults.

See npm help json for definitive documentation on these fields
and exactly what they do.

Use npm install &lt;pkg&gt; --save afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
name: (project)
version: (0.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (BSD)
About to write to /Users/project/package.json:

{ "name": "project",
"version": "0.0.0",
"description": "ERROR: No README.md file found!",
"main": "index.js",
"scripts": {
"test": "echo &quot;Error: no test specified&quot; && exit 1"
},
"repository": "",
"author": "",
"license": "BSD"
} [/shell]

ほかにも、すでに提供されているテンプレートを使用して作成することも可能。grunt-init-*** という形式で配布してあるので探して最適なものを使う。
今回はjquery-init-templateをつかってやってみる。

[shell]

まずはgrunt-init moduleをグローバルにインストール

$ npm install grunt-init
$ git clone [email protected]:gruntjs/grunt-init-jquery.git ~/.grunt-init/jquery

$ grunt-init jquery
Running "init:jquery" (init) task
This task will create one or more files in the current directory, based on the
environment and the answers to a few questions. Note that answering "?" to any
question will show question-specific help and answering "none" to most questions
will leave its value blank.

"jquery" template notes:
Project name should not contain "jquery" or "js" and should be a unique ID not
already in use at plugins.jquery.com. Project title should be a human-readable
title, and doesn’t need to contain the word "jQuery", although it may. For
example, a plugin titled "Awesome Plugin" might have the name "awesome-plugin".

For more information, please see the following documentation:

Naming Your Plugin http://plugins.jquery.com/docs/names/
Publishing Your Plugin http://plugins.jquery.com/docs/publish/
Package Manifest http://plugins.jquery.com/docs/package-manifest/

Please answer the following:
[?] Project name (project)
[?] Project title (PROJECT)
[?] Description (The best jQuery plugin ever.)
[?] Version (0.1.0)
[?] Project git repository (git://github.com/project.git)
[?] Project homepage (https://github.com/project) [?] Project issues tracker (https://github.com/project/issues) [?] Licenses (MIT)
[?] Author name (YOUR-NAME)
[?] Author email (YOUR-EMAIL)
[?] Author url (none)
[?] Required jQuery version (*)
[?] Do you need to make any changes to the above before continuing? (y/N)

Writing .gitignore…OK
Writing .jshintrc…OK
Writing CONTRIBUTING.md…OK
Writing Gruntfile.js…OK
Writing README.md…OK
Writing libs/jquery-loader.js…OK
Writing libs/jquery/jquery.js…OK
Writing libs/qunit/qunit.css…OK
Writing libs/qunit/qunit.js…OK
Writing src/.jshintrc…OK
Writing src/project.js…OK
Writing test/.jshintrc…OK
Writing test/project.html…OK
Writing test/project_test.js…OK
Writing LICENSE-MIT…OK
Writing package.json…OK
Writing project.jquery.json…OK

Initialized from template "jquery".
You should now install project dependencies with npm install. After that, you
may execute project tasks with grunt. For more information about installing
and configuring Grunt, please see the Getting Started guide:

http://gruntjs.com/getting-started

Done, without errors.
[/shell]

と対話式にセットアップでき、完了すると以下のようになる。

[shell]
. ├── CONTRIBUTING.md
├── Gruntfile.js
├── LICENSE-MIT
├── README.md
├── project.jquery.json
├── libs
├── package.json
├── src
└── test
[/shell]

~/.grunt-init/jquery にcloneされているので次回からは grunt-init jquery だけでOK。
生成されたpackege.jsonは

[javascript]
{ "name": "jquery-plugin",
"version": "0.0.0-ignored",
"engines": {
"node": ">= 0.8.0"
},
"scripts": {
"test": "grunt qunit"
},
"devDependencies": {
"grunt-contrib-jshint": "0.1.1",
"grunt-contrib-qunit": "0.1.1",
"grunt-contrib-concat": "0.1.2",
"grunt-contrib-uglify": "0.1.1",
"grunt-contrib-watch": "0.2.0",
"grunt-contrib-clean": "0.4.0",
"grunt": "~0.4.0"
}
} [/javascript]

つづいてタスクの内容を記載するGruntfileを作成。
アップグレードの場合は変更する。v0.4からはgrunt.js が Gruntfile.js か Gruntfile.coffee のどちらかを使うことになる。

せっかくなので、coffeeにしてみる。

[javascript]
module.exports = (grunt) ->
grunt.initConfig
slim:
dist:
files:
"index.html": "index.slim"

watch:
  scripts:
    files: [&quot;*.slim&quot;]
    tasks: [&quot;slim&quot;]
    options:
      nospawn: true

grunt.loadNpmTasks "grunt-slim"
grunt.loadNpmTasks "grunt-contrib-watch"
grunt.registerTask "default", ["slim"]
[/javascript]

そして、モジュールをインストールする。
これはGruntfileの作成と順序逆でも問題なし。

Gruntfile,package.jsonをプロジェクトrootに配置して、こんな感じ。

[shell]
projectroot
├── Gruntfile.coffee
├── package.json
[/shell]

npm moduleを取得する。

[shell]
npm install grunt –save-dev
[/shell]

–save-dev オプションでpackege.jsonにdevDependenciesプロパティが追記され、moduleの情報を追加されます。

[javascript]
…
"devDependencies": {
"grunt-contrib-concat": "0.1.2",
"grunt-contrib-uglify": "0.1.1",
"grunt-contrib-jshint": "0.1.1",
"grunt-contrib-nodeunit": "0.1.2",
"grunt-contrib-watch": "0.2.0",
"grunt": "0.4.0"
} …
[/javascript]

あとは、必要に応じてmoduleを追加して、Gruntfileにタスクを追加していけばいい感じですかね。

これまでグローバルで管理していたmoduleもプロジェクト単位で管理でき、プロジェクト開発者全員で同じ開発環境を容易に構築できるようになってとても便利になった感じがします。

とりあえず、クライアントサイドの開発が多い、エンジニアやデザイナーは使うといいですよ、Grunt。

参考サイト

Grunt Upgrading from 0.3 to 0.4

Comments