サイト作ってて、テキスト編集して保存したら自動でブラウザが更新されて確認できるとめでたいと思ったのでgruntでLiveReloadをしようと思った
grunt-cli (grunt.js v0.4.x)で LiveReload を試してみた | Re* Programming
これ見ながらやった
途中教えてもらいながらやったので、忘れないうちにメモ
node.jsはこないだ入れてたのでgruntを入れる
$ npm install -g grunt-cli
エントリーではmkdirとかあったけど、今回は「portfolio」というディレクトリのなかの「index.html」をlivereloadしたかったので省略した
つぎにpackage.jsonを作成する。サイト見てる限りどこに置けばいいのかわかんなかったけど、監視するindex.htmlのあるportfolioディレクトリに置けばよさそうだった
package.jsonてなんやねんってなったからこれ読んだ
npmとpackage.json使い方 - Kokudoriing
package.jsonなんとなくわかったようなわかんなかったような
それで、エントリーでは
$ vim package.json
とあったけどvimわかんなくて恐ろしいから普段使ってるsublime text 2で編集しようと思った。
package.jsonをつくる
$ touch package.json
sublime text2でpackage.jsonを編集する
(中身はエントリーに書いてあるので省略)
つぎgrunt プラグインダウンロードする
$ npm install
このときにnode_modulesというディレクトリがportfolioディレクトリに勝手にできた
つぎにGruntfile.js を作成する
これも場所はportfolioでよさそう
$ touch Gruntfile.js
(これも中身はエントリーに書いてあったので省略)
grunt実行する
$ grunt
【2013.11.08追記】
やったーできた！！！index.htmlファイルを更新したら「running」って出るから動いてるっぽい！！
とおもったけどブラウザはリロードされず・・・
読んでたらhttp://localhost:9001/index.htmlにアクセスしなくちゃいけなくて、そのためにはwebサーバを立てなくちゃいけない感じだった。
apacheを入れないとダメそうな感じ
よくわかんないから今度エンジニアの友達に教えてもらうことにしたので今日はここまで
仲のよい友達にエンジニアがいて助かった
apache入れなくても
http://127.0.0.1:9000
にアクセスしたらできました！！！ヤッタ！！！
サイトに書いてあったのと、Gruntfile.jsの内容が違ったようでした
