読者です 読者をやめる 読者になる 読者になる

LiveReloadにあこがれてやってみたことのメモ

サイト作ってて、テキスト編集して保存したら自動でブラウザが更新されて確認できるとめでたいと思ったので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の内容が違ったようでした