Menu

Subscribe

Grunt を導入

#javascript #less #grunt

GruntをREMPに導入するためのメモ。

node.jsのインストール

node.jsを最新版にする。node.jsのinstallボタンで落ちてくるパッケージから再インストールするだけ。

node -v
v0.10.8
npm -v
1.2.23

grunt-cliのインストール

グローバルにgrunt-cliをインストール。

npm install -g grunt-cli

プロジェクト毎にgruntを導入する

プロジェクトのルートでpackage.jsonを生成する。

npm init

プロジェクトのルートでgruntをインストール。

npm install grunt --save-dev

--save-devをつけるとpackage.jsonにインストールしたタスクの依存関係が記録される。 package.jsonに依存関係が記録されていればnpm installだけで一括導入ができるので流用しやすそう。 なので--save-devをつけることにする。

タスクのインストール

  1. grunt-contrib-uglify
    • JavaScriptを圧縮する
  2. grunt-contrib-watch
    • Lessを監視して変更した時に別のタスクを呼び出す

  3. grunt-contrib-less

    • Lessをcssにコンパイルしたり圧縮したりする

      npm install grunt-contrib-uglify grunt-contrib-watch grunt-contrib-less --save-dev

以下だと便利タスク一式が一発で入るらしいけど、一個ずつ選びたいので使わない。

npm install grunt-contrib

いまの設定

lessファイルとコンパイル先のcssを両方ワイルドカード指定する方法がわからなくてはまったけど解決。 このリンクを参考に設定した。

実行

デフォルトのタスクを実行する。

grunt

タスクを指定して実行する。

grunt less:dist

参考