【mac】gruntで作業効率化(するために環境を作ってみた)

社畜猫の前足で右腕を抱え込まれながら甘噛みとぺろぺろされつつ後ろ足キックを受けるという天国と地獄を味わう傍らで、いま人気上昇中のgrunt環境を作成してみました。
昔のバージョンをインストールしてたため少し嵌ったところも含めて以下からどうぞ。

最初はcodegridさんのこの記事の通りにやったんです。
(記事自体は有料なので、全部読みたい方は買ってくださいな)
https://app.codegrid.net/entry/grunt-introduction

まずglobalに「grunt-cil」をインストール。

npm install -g grunt-cli

テストフォルダ「grunt-test」を作成してその中にgrunt本体をインストールして実行。

grunt

エラー!!!!!!

…………え?
この通りにやっているのに……??

エラー文で「ここ見てやってね」と言われたサイトに飛んでみました。
http://gruntjs.com/getting-started

あっれ……?なんか最初にアンインストールするコマンドあるよ……?
なんだって?
If you have installed Grunt globally in the past, you will need to remove it first:

ごめんわたし英語苦手なんだ(真顔)

ーーと、諦める訳にもいかずなんとなく感覚で訳すと、「グローバルにgruntインストールしてたらアンインストールしてね」って書いてある気がする。んん?gruntグローバルにインストールしてたっけ????

してましたね。
styledoccoのテストするときにしましたね。これか!こいつのせいか!

gruntさん、version 0.4.0より前ではglobalへインストールする形だったんですよね。でもversion 0.4.0以降はglobalへインストールするのは「grunt-cli」という、「そのディレクトリにインストールされたGruntを実行する」ためのものです。
grunt本体は、作業をしたい各ディレクトリごとにインストールする形になってます。

gruntは日々アップデートされていきます。が、使うときは未来の事なんて解りません。
プロジェクトごとにgruntのバージョンが違う可能性がある。
過去のプロジェクトに手を入れたい場合、gruntのバージョン違いでコマンドが実行出来ない!ってことにもなりかねません。
そのために、個別にインストールする、という形へ進化を遂げたらしいです。

ちなみに、globalにインストールされているかどうかはHD直下の不可視ファイルである「usr」内の「local/lib/node_modules」にgruntフォルダがあるかどうかで判断出来ます。

ああー、そういうことかー、と納得出来た段階で気を取り直して最初から。
(ちなみに、既にnode.jsはインストールしてあったのでそこは飛ばしています。
node入れてないよ!って方は http://nodejs.org/ こちらからどうぞ。
普通にアプリケーションをインストールする感覚で、nodeをインストール出来ます。たぶん)

まずは前のバージョンのgruntをアンインストール。
ターミナル開いて以下を実行。

npm uninstall -g grunt

次に、globalに「grunt-cil」をもう一度インストール。

npm install -g grunt-cli

テストフォルダへ移動

cd grunt-test

ここでpackage.jsonという、nodeのプロジェクトファイルを作ります。
以下をコピペして「package.json」と名前をつけて保存。

{
  "name": "my-project-name",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.0"
  }
}

プロジェクトファイルを作れたらnpmを利用してインストールします。

npm install

一行です。簡単です。
プラグインなどもプロジェクトファイルに記述しておけば、一緒にインストールしてくれます。
node便利。今回はgruntだけなのであれですけど。

これでgruntが利用可能になりました!
実際に実行させるべき指令は 「Gruntfile.js」 に記述します。
試しに以下をコピペして「Gruntfile.js」と名前をつけて保存。

module.exports = function (grunt) {
 
  grunt.registerTask('hello', 'description here', function() {
    grunt.log.writeln('hello! hello!');
  });
 
  grunt.registerTask('default', [ 'hello' ]);
 
};

gruntを実行します。

grunt

これで無事ターミナルに「hello! hello!」って表示されました!
よかったにゃー。

【mac】gruntで作業効率化(するために環境を作ってみた)」への1件のフィードバック

  1. Hippopotamus Mascot Adult Costume For Sale

    I wanted to say your blog is very good. I continually like to hear anything new about this as a result of I even have the similar blog in my Country on this subject thus this help′s me a lot. I did a research on the matter and observed a excellent form of blogs but nothing like this.Thanks for sharing such a lot inside your blog.

    返信

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>