コピペが出来るなら誰でも出来る、Web制作タスク自動化ツール「Grunt」導入手順 | OZPAの表4
導入/利用手順としては
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
その他タスクなどに関しては下記が詳しそう。
使いどころとしては、
が有名なプラグインですよ、と書いています。
まとめてやることがないと逆に効率が悪くなりそうなのでがんばろう
ターミナルコマンド 覚えたいリスト