webSiteCreatePack

必須

Node (最新版推奨)
Gulp
```
 npm install -g gulp
```
bower
Ruby
Bundler

フォルダ構成

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

src（作業用）フォルダで作業した内容をgulpでwatchして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を自動更新するスクリプトを書く

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';

ファイルを生成

package.jsonのnode_modulesをinstall
```
 sudo npm install
```
Gemfileに従い、sass,compassをinstall
```
 bundle install
```
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を使っています。

<!-- 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
```

masanao-aoki/typescript-flickr