Grunt.js

Grunt.jsを少しいじってみた。
普段ターミナル使わないため（言い訳）、出回っている導入・入門記事が合わないものも多かったけど下記に挙げたリンクが参考になりました。ありがとうございます。

 

• コピペが出来るなら誰でも出来る、Web制作タスク自動化ツール「Grunt」導入手順 | OZPAの表4
• Gruntで始めるWeb制作の自動化 – to-R
• Web制作で面倒な作業を自動化するビルドツール、Grunt v0.4 入門｜Web Design KOJIKA17
• gruntを使ってCSS/JS周りを自動化するのが、なうでペヤングらしいので使ってみた – 鳥さんの独り言

 

導入／利用手順としては

 

node.jsのインストール

 

Grunt CLIのインストール

 
 

—– これ以下はプロジェクト毎に行う —–

 
 

ターミナルでプロジェクトフォルダに移動

cd desktop/(folder_name)

 

package.jsonの作成

npm init

でドンドン質問来るけどentry point: (index.js)の後はGruntfile.jsと、それ以外はエンターで。最後にもIs this ok? (yes)の後にエンターを押すのを忘れないこと

 

プロジェクト単位のGruntインストール
ターミナルで

sudo npm install grunt --save-dev

インストール終了するとpackage.jsonが勝手に変更されている

 

Gruntfile.jsの作成
Gruntのタスクや設定を行うファイル。中身はひとまず

module.exports = function(grunt) {
	grunt.initConfig({
	watch: {
		dev: {
			files: ["watch.txt"]
		}
	}
	});
	grunt.loadNpmTasks('grunt-contrib-watch');
};

とし、package.jsonと同階層に保存。

 

プラグインインストール

sudo npm install grunt-contrib-watch --save-dev

でインストール。
node_modulesというフォルダが自動生成され、その中にプラグインの各ファイルが入っていく。
この時もpackage.jsonが勝手に変更されている。

 

watch.txtの作成。
中身は適当に。package.jsonと同階層に保存。

 

本準備も完了。
ターミナルで

grunt watch

と入力しエンター。

Waiting...

となっていれば監視状態に。

 

動作の確認
watch.txtの中身を変更して、ターミナルを見ると

>> File "watch.txt" changed.

となっているはず。

 

監視をストップさせるにはターミナルでControl+C

 
 

その他タスクなどに関しては下記が詳しそう。

• タスクの設定 | Grunt 日本語リファレンス

 

使いどころとしては、

• Coffee Script
• handlebars
• jade
• JS Hint
• less
• Require.js
• Sass
• stylus

が有名なプラグインですよ、と書いています。

 

まとめてやることがないと逆に効率が悪くなりそうなのでがんばろう

 

ターミナルコマンド 覚えたいリスト

• Mac ターミナルコマンド 一覧（使いそうなやつ） | とある誰かの覚え書き