yuheijotaki.com

Grunt.js

Grunt.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

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

使いどころとしては、

  • Coffee Script
  • handlebars
  • jade
  • JS Hint
  • less
  • Require.js
  • Sass
  • stylus
が有名なプラグインですよ、と書いています。

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

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