復習 gitで管理しgruntで処理を自動化しlivereloadで自動更新する

f:id:hasegawakiki:20130812130937p:plain
コマンドでwwwディレクトリに移動し、.gitを作る。

$ git init

ローカルエリアにあるもの全部indexに入れる

$ git add .

コミット

$ git commit -m "コメントコメント"

ここからhaml,stylus,coffeeScriptを使ってコンパイルする。方法

まず、 gruntをインストール。
node -v
npm -v
と打ってバージョンが帰ってきたら、

sudo npm install -g grunt

とする。
sudo はなくてもできるかもだけど、ERR!がいっぱい出てきたので。
passwordいれて実行。

だけど　grunt -version とか打ってもgrunt無いよって言われる。

解決→
npm install -g grunt-cli　でgrunt-cilをインストール
次に構築ディレクトリに行き、 npm init とする。
適当にエンター押してって、package.jsonを生成
npm install grunt --save-dev　でgruntインストール
grunt -versionで確認するとバージョンが表示される。



参考サイト
http://kojika17.com/2013/03/grunt.js-memo.html
http://fingaholic.github.io/posts/2013-02-21-grunt.html
http://blog.mach3.jp/2013/03/gruntjs.html

finder上で隠しファイルを表示する方法

ターミナル

ターミナルで、下のようにタイプする。

$ defaults write com.apple.finder AppleShowAllFiles TRUE
$ killall Finder

すると、finderが再起動されて隠しファイルが表示される。
非表示に戻すときは、

$ defaults write com.apple.finder AppleShowAllFiles FALSE
$ killall Finder

LiveReloadでブラウザ自動更新

livereload

f:id:hasegawakiki:20130730191710p:plain
LiveReloadというアプリで、ファイルを編集したらブラウザを自動更新させる事が出来る。
ここからダウンロードできる。latest version みたいなやつ。
で、ダウンロードしたら起動する。すると
f:id:hasegawakiki:20130730191054p:plain
こんなんがでてくるから、参照したいフォルダを選ぶ。（それいかにあるファイルが更新されたときに自動更新される）
えらんだら、f:id:hasegawakiki:20130730184827p:plain
こんなんでてくるので、scriptをhtmlとかhamlのの直前にコピペする。
hamlの場合は、haml用に描かなくてはいけない。html2hamlという便利なサイトがあるのでここでhaml用に変換する。
で、試しになんかのファイルいじって保存してみるとリロードされてるっぽい！
だけどブラウザ上になにも見えなくなった。
その後手動でリロードすると見えるんだけどこれじゃ全く意味がない！
ので調べたら、この現象はリロードするタイミングが早すぎるためらしい。LiveReload側でリロードのタイミングを遅らせられるようなので、
f:id:hasegawakiki:20130730191216p:plain
ここ押して
f:id:hasegawakiki:20130730191500p:plain
こんな感じで0.5とかにしたらちゃんと出来た。

参考URL
http://news.ko-zu.com/livereload2/
http://gouf.github.io/blog/2012/10/13/auto-reload/

Gruntfile.jsの中身

grunt 
module.exports = function(grunt) {
	grunt.initConfig({
		concat: {
			'all.css' : [
				'css_in/*.css'
			]
		},
		watch: {
			files: [
				'css_in/*.css'
			],
			tasks: 'concat'
		}
	});
};

これは、css_inフォルダの中のcssを監視(watch)して、変更があったら
all.cssにまとめて出力(concat)するというモノ。

ターミナルで

$ grunt watch

と実行しておくと、cssが変更された時点で、一連のタスクが実行される。
監視の停止はCtrl+C

参考文献
http://d.hatena.ne.jp/diveintounlimit/20120909/1347186023

cssでIE7だけ別指定する方法

IE

簡単、

#hoge{
	color:red;
}

をコピーして

.lt-ie8 #hoge{
	color:blue;
}

とする。（IE7用）
で、htmlに

<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]>  <![endif]-->

こんな感じにして、
あとmodernizrをダウンロードしてからこうするだけ。

<script src='assets/js/modernizr-2.6.2.min.js' type='text/javascript'></script>