Gruntのインストール(Macの場合)

スポンサーリンク

ビルドツールGruntのインストール手順の忘却メモです。

Grunt:http://gruntjs.com
インストールにはnode.jsが必要なので、インストールしておく。

こちらがgruntのインストールコマンド
$ npm install -g grunt
npm ERR! Error: EACCES, mkdir ‘/usr/local/lib/node_modules/grunt’

・・・(省略)

エラーが大量にでるので以下のコマンドを入力

$ sudo npm install -g grunt
Password:パスワード

・・・(省略)

Gruntのコマンドラインインターフェースであるgrunt-cliもインストール

$ sudo npm install -g grunt-cli

・・・(省略)

とりあえず最低限は終了。次開発環境を作ります。
testフォルダを適当に新規作成。テストフォルダに移動しておいてください。

$ mkdir testDir
$ cd testDir/

package.jsonを作成する。

$ npm init

・・・(省略)

name: (現在いるフォルダ) 適当
version: (0.0.0) 適当
description: ディスクリプション名
entry point: (index.js) なし
test command: なし
git repository: なし
keywords: なし
author: 名前
license: (ISC) BSDとかライセンス名
About to write to 現在いるフォルダ/package.json: なし

・・・(省略)

Is this ok? (yes)

これでフォルダ内にpackage.jsonが出来てるはず。

$ ls
package.json

以下のコマンドにて必要なプラグインをインストール

$ sudo npm install grunt-contrib-watch grunt-contrib-cssmin –save-dev
Password:パスワード

・・・・(省略)

するとnode_modulesというフォルダが勝手に出来て、
さらに中に今追加したパッケージが格納されてるはず。

$ ls
node_modules package.json
$ ls node_modules/
grunt grunt-contrib-cssmin grunt-contrib-watch
ちなみに、package.jsonにプラグインの記述があるので、
試しにnode_modulesフォルダを削除して以下のコマンドを実行しても復活します。
$ sudo npm install

・・・・(省略)

node_modulesが復活!!
$ ls
node_modules package.json
$ ls node_modules/
grunt grunt-contrib-cssmin grunt-contrib-watch

package.jsonと同じところにcssフォルダを作って、以下のファイルを作成する。

css/style.css (中身はなんでもOK)
[html]
#aaa p {
 font-size:80%;
 text-align:center;
}

css/base.css (中身はなんでもOK)
[html]
#aaa strong {
 font-weight:bold;
 margin-bottom:20px;
}

cssを圧縮させるjsを用意する「Gruntfile.js」
[js]
module.exports = function(grunt) {
 grunt.initConfig({
   cssmin: {
     compress: {
       files: {
         ‘css/min.css’: [‘css/base.css’, ‘css/style.css’]
       }
     }
   },
   watch: {
     files: [‘css/*.css’],
     tasks: [‘cssmin’]
   }
 });
 grunt.loadNpmTasks(‘grunt-contrib-cssmin’);
 grunt.loadNpmTasks(‘grunt-contrib-watch’);
};
$ ls
Gruntfile.js css node_modules package.json
$ ls css/
base.css style.css

出来たら以下のコマンドを実行する

Running “cssmin:compress” (cssmin) task
File css/min.css created: 101 B86 B

Done, without errors.

cssフォルダ内に「min.css」という2つのcssを結合した圧縮ファイルが作成されている。

$ ls css/
base.css min.css style.css

さらに以下のコマンドを実行する

$ grunt watch
Running “watch” task
Waiting…
>> File “css/style.css” changed.
Running “cssmin:compress” (cssmin) task
File ./min.css created: 159 B → 97 B

Done, without errors.
Completed in 0.739s at Mon Jun 23 2014 22:50:06 GMT+0900 (JST) – Waiting…

これで監視が始まった。base.css、style.cssを変更すると自動的にmin.cssにも反映される。

Control+Cで監視終了
このブログの運営者
RIE
RIE

台湾駐在員&旅人ブロガー。フロントエンジニア。

台湾が好きすぎて移住「台湾のことなら台湾人にも負けない知識と経験がある」と自負しています(笑)東南アジア一人旅が得意です。

このブログでは旅の体験談、台湾情報、私の独り言を発信しています。

旅サポート、制作依頼も承っています。
問い合わせ、TwitterのDMなどでお気軽にお問い合わせください!

RIEをフォローする
スポンサーリンク
Booking.com
コラム
スポンサーリンク
RIEをフォローする
RIEのアジアンライフ

コメント