サイトを作り始める時の初期準備 2015

サイトを作り始めると時にいつも「どうしようかなぁ・・。」と迷って
とりあえずその時の最善だと思うものを用意してやってはいたのですが、

そろそろ「ちゃんと考えなおそう！」と思いたち
作りはじめる前にする準備とそれに伴うデフォルトのファイルを作ってみました。

GitHub: https://github.com/kamem/webSiteCreatePack

## 主な内容

1. sass,compassはBundlerを使ってプロジェクトごとに管理。
2. jsのパッケージ管理はnpmで主に管理して、npmで管理しきれないものに関してはbowerを使う。（好みで＾＾；）
3. jsはjsxの場合はwebpack,babelを使い。jsの場合は生のjsを使う。
4. 作業フォルダと公開フォルダを分けて公開フォルダはバージョン管理しないことで二重管理をさける。

## 必須
1. Node (最新版推奨)
2. Gulp

		npm install -g gulp
3. bower
4. Ruby
5. Bundler

### フォルダ構成

	├ root (公開用)
	└ src (作業用)
		├ css
		├ js
		└ img

src（作業用）フォルダで作業した内容をgulpでwatchしてroot（公開用）

rootはバージョン管理をしないように`.gitignore`内で省いています。
src側で作業しroot側で作業しないようにします。

#### フォルダ構成の名前を変えたい場合
`gulpfile_settings.js`の内容を書き換えてください。

## 準備

### jsの準備
jQueryなど必要なjsがあればpackage.jsonに記述するか。
もしくはbower.jsonに記述してください。

個人的にはnpmで管理できる範囲であればpackage.jsonに書き、
npmにないものであればbower側に記述するように使い方を分けています。
フロント側で必要なファイルはbowerで一括管理も良いかなと思っています。

package.json

	"dependencies": {
		"jquery": "",
		"react": "",
		"react-router": ""
	}

bower.json

	"dependencies": {
		"google-code-prettify": "",
	}
	
それぞれプロジェクトを始める際にバージョン指定をしてください。
空の状態だと最新がダウンロードされますが、
時間がたち最新バージョンが変わった場合には正常に動作しなくなってしまう可能性があるためです。

#### バージョンをひとつひとつ設定するのがめんどくさい場合。
下記を使ってnode_modulesをインストールするとpackage.jsonに現在の最新のバージョンが自動で指定できます。

* [package.jsonのdependenciesを自動更新するスクリプトを書く](http://qiita.com/okunishinishi@github/items/7629b58d1c3d464738dc)

### scssの準備
自分で使っているscssファイルを`src/css`内に入れてください。
自分の場合bowerでinstallしてcpで移動しています。

	bower install https://github.com/kamem/compass.default.git
	cp bower_components/compass.default/sass/* src/css

postcssを使いたい場合は`gulpfile_settings.js`を修正してscssではなくcssをwatchするようにします。

	settings.watch.css.files = settings.watch.css.dir + '**/*.css';


#### Gemfileを確認しておきましょう。（sass,compassのバージョンを指定）
	source "https://rubygems.org"

	gem 'sass', '3.4.0.rc.3'
	gem 'compass', '1.0.3'


### ファイルを生成

1. package.jsonのnode_modulesをinstall

		sudo npm install

2. Gemfileに従い、sass,compassをinstall

		bundle install

3. bower.jsonを使ってjsをダウンロードしたい場合

		bower install

## 作業
### 開始
	gulp

### スプライトファイルの制作
	// "src/img/sprite/**/*.png"内のファイルをスプライト化
	gulp sprites
	
`src/img/sprite/`内に`sprite-**.png`というファイルがフォルダの数分生成されます。
`src/css`内に`src/img/sprite/`以下のフォルダの数分のscssの設定ファイルが生成されます。

ex) `num`フォルダの場合

	sprite-num.png
	_num.scss

### svgからfontの制作
	// "src/font/**/*.svg"内のファイルをfont化
	gulp svgfonts

`src/font/`内にfontがフォルダの数分生成されます。
`src/css`内に`src/font/`以下のフォルダの数分のscssの設定ファイルが生成されます。
fontの内容を確認したい場合は`src/css/font/sns_fontlist.html`を見るとfont一覧を確認できます。

#### fontの使い方

	@import "font/_name";

	.test {
		font-family: $name-test; //変数で文字コードを取ってくることができます。
		//(フォルダ名 - ファイル名)
	}

吐き出すscssの内容を変えたい場合はsrc/css/font/templates/css.scssを編集してください。
### 実作業

#### html

[usemin](https://www.npmjs.com/package/gulp-usemin)を使っています。

	<!-- build:js js/common.js -->
	<script src="../node_modules/jquery/dist/jquery.js"></script>
	<script src="../bower_components/google-code-prettify/src/prettify.js"></script>
	<!-- endbuild -->
	
`root/js/common.js`として`jquery.js` `prettify.js`をまとめたファイルが生成されます。
htmlは`root/`に下記ように変換され出力されます。

	<script src="js/common.js"></script>
	

#### js
`jsx`と拡張子をつけることによって、webpackとbabelを使えるようにしています。
webpackとbabelを使わない場合は拡張子を`js`にしてください。


### 確認方法
localhost:8888 で確認できます。

## 公開
* CSS,JSの圧縮

		gulp build --minify true

公開前に上記を実行することでroot内に圧縮されたファイルが出来上がります。


こんな感じで今後サイトを作り始める際はやっていこうかと思いました！
最近いろいろと移り変わりが激しいのでまた設定など変わっていくかと思いますがその都度更新などしていこうかと思います。

最近ではpostcssなど流行っているので試してみようかと思ったのですが
いま現状postcssを使おうと思うとエディタ側が対応しきれていない状況なのでちょっと使いづらいかなぁと思いました。
シンプルだし早いッて噂なので試してみたいなぁとは思っているのですが今後に期待です！