Grunt を使う
Node.js のインストール
$ sudo add-apt-repository ppa:chris-lea/node.js $ sudo apt-get update $ sudo apt-get install nodejs $ node -v v0.10.15
Grunt のインストール
- Getting started - Grunt: The JavaScript Task Runner
- Web制作で面倒な作業を自動化するビルドツール、Grunt v0.4 入門|Web Design KOJIKA17
$ sudo npm install -g grunt-cli … /usr/bin/grunt -> /usr/lib/node_modules/grunt-cli/bin/grunt grunt-cli@0.1.9 /usr/lib/node_modules/grunt-cli ├── resolve@0.3.1 ├── nopt@1.0.10 (abbrev@1.0.4) └── findup-sync@0.1.2 (lodash@1.0.1, glob@3.1.21)
作業ディレクトリに package.json を作る。
$ cd 作業ディレクトリ
$ npm init
(てきとうに入力)
ここに Grunt と、使いたい Grunt プラグインをインストール。
$ npm install grunt --save-dev … grunt@0.4.1 node_modules/grunt ├── which@1.0.5 ├── dateformat@1.0.2-1.2.3 ├── colors@0.6.1 ├── hooker@0.2.3 ├── async@0.1.22 ├── eventemitter2@0.4.12 ├── coffee-script@1.3.3 ├── underscore.string@2.2.1 ├── iconv-lite@0.2.11 ├── lodash@0.9.2 ├── findup-sync@0.1.2 (lodash@1.0.1) ├── nopt@1.0.10 (abbrev@1.0.4) ├── glob@3.1.21 (inherits@1.0.0, graceful-fs@1.2.3) ├── minimatch@0.2.12 (sigmund@1.0.0, lru-cache@2.3.0) ├── rimraf@2.0.3 (graceful-fs@1.1.14) └── js-yaml@2.0.5 (esprima@1.0.3, argparse@0.1.15)
$ npm install --save-dev grunt-contrib-concat grunt-contrib-uglify … grunt-contrib-concat@0.3.0 node_modules/grunt-contrib-concat grunt-contrib-uglify@0.2.2 node_modules/grunt-contrib-uglify ├── grunt-lib-contrib@0.6.1 (zlib-browserify@0.0.1) └── uglify-js@2.3.6 (async@0.2.9, source-map@0.1.27, optimist@0.3.7)
package.json の devDependencies に情報が追加されているのがわかる。
"devDependencies": { "grunt": "~0.4.1", "grunt-contrib-concat": "~0.3.0", "grunt-contrib-uglify": "~0.2.2" }
Grunt を使う
やりたいことは Gruntfile.js というファイルを作ってそこに書く。
$ grunt タスク名
とするとそのタスクが実行される。