フロントエンド開発ツールキット

[フロントエンド開発ツールキット](https://github.com/makipe/gulp-less-cofffescript-jade-bower)
======================

概要
------
フロントエンド開発時に使えるツール群（Gulp + Less + Jade + CoffeeScript + bower 等）をまとめたものです。
[gulp.js](http://gulpjs.com/)(以下、gulp)を使用し、HTML/CSS/JSコーディングの補助、開発中に使用するパッケージの管理やファイルコピー等の操作を自動化することでフロントエンド開発を助けます。

機能一覧
------
+ bowerで管理しているパッケージをファイルの種類（js, css）ごとに結合圧縮
+ Jadeコンパイル
+ Lessコンパイル、ベンダープレフィックス追加
+ CoffeeScriptコンパイル
+ 画像圧縮
+ ブラウザライブリロード
+ ブラウザ間の操作同期
+ ファイル、フォルダ変更監視（各タスクでエラーが発生しても監視は続行されます。タスクの実行はファイル、フォルダに変更があった場合にのみ実行します。）
+ JS, CSS圧縮
+ 開発ディレクトリからデプロイディレクトリへのファイルコピー

動作環境の構築
------
### git (bowerが使用します)
Windowsの方は[Git for Windows](https://msysgit.github.io/)からインストーラーを取得してください。

Homebrewの場合

```
brew install git
```

インストールできているか確認します。

```
git -v
```

### Node.js
インストーラを使用する場合は、[ダウンロードページ](http://nodejs.org/download/)から取得してください（環境によって適宜インストールしてください）。  

Homebrewの場合

```
brew install node
```

インストールできているか確認します。

```
node -v
```

### npm
Node.jsをインストールするとnpmもインストールされます。

```
npm -v
```

### gulp
+ グローバルインストール

```
npm install -g gulp
```

または

```
npm i -g gulp
```

+ ローカルインストール
開発を行うディレクトリ上で下記コマンドを実行します。

```
npm install --save-dev gulp
```

または

```
npm i -D gulp
```

インストールできているか確認します。

```
gulp -v
```

ツールキットのインストール
------
下記より取得し、任意のフォルダに展開する。

```
https://github.com/makipe/gulp-less-cofffescript-jade-bower
```

使い方
------

### プロジェクト全体のパス設定

+ /gulpfile.coffee

下記コメント下の記述をプロジェクトに合わせて適宜変更する。

```coffeescript
################################################################################
# paths
################################################################################
```

+ プロジェクトのルート・ディレクリ

```coffeescript
st_root = "./"
```

+ 開発用ソースの格納ディレクトリ

```coffeescript
assets = "assets/"
```

+ デプロイ用ソースの格納ディレクトリ

```coffeescript
dist   = "dist/"
```

+ 監視対象のディレクトリ

```coffeescript
targets =
  # pages:    [
  #   "./**/*.html"
  #   "!node_modules/**/*.html"
  # ]
  bowerComponents: "bower_components/**/*"
  assets:
    jade:
      templates: [
        assets + "jade/**/*.jade"
      ]
      pages: [
        assets + "**/*.jade"
        "!node_modules/**/*.jade"
        "!" + assets + "jade/**/*.jade"
      ]
    less:     [
      assets + "css/less/**/*.less"
      "!" + assets + "css/less/_mixin.less"
    ]
    css:   assets + "css/**/*.css"
    js:   assets + "js/**/*.js"
    coffee:   assets + "js/coffee/**/*.coffee"
    img:      [
      assets + "img/**/*.{jpg,jpeg,png,gif,svg}"
      "!node_modules/**/*.{jpg,jpeg,png,gif,svg}"
    ]
  dist:
    html:     dist + "html/**/*.html"
    css:      dist + "css/**/*.css"
    js:       dist + "js/**/*.js"
    img:      [
      dist + "img/**/*.{jpg,jpeg,png,gif,svg}"
      "!node_modules/**/*.{jpg,jpeg,png,gif,svg}"
    ]
```

+ 設定で使用するディレクトリ

```coffeescript
dirs =
  assets:
    jade:     assets + "jade/"
  dist:
    css:      dist + "css/"
    cssmin:   dist + "css/min/"
    csslib:   dist + "css/lib/"
    less:     dist + "css/less/"
    img:      dist + "img/"
    js:       dist + "js/"
    jsmin:    dist + "js/min/"
    jslib:    dist + "js/lib/"
```

### ``gulp``で実行するタスクの選択
下記コメント下の記述をプロジェクトに合わせて適宜変更する。

```
################################################################################
# default
################################################################################
```

下記で不要なものをコメントアウトする。
「今回は」

```coffeescript
gulp.task "default", [
  "bower"         # フロントエンドで使用するパッケージの管理
  "pfix"          # LESSのコンパイルとベンダープレフィックスの付与
  "imagemin"      # 画像圧縮
  "coffee"        # CoffeeScriptのコンパイル
  "js"            # JavaScriptのコピー
  "jade"          # Jadeのコンパイル
  "browser-sync"  # ブラウザ間同期・ライブリロード
  "webserver"     # ローカルサーバ起動
  "watch"         # ファイル変更監視
]
```

### Jadeの設定

+ /assets/jade/_config.jade

Jade内で使用する変数の初期値を設定する。

```/assets/jade/_config.jade
//- ****************************************************************************
//- パスの設定
//- ****************************************************************************
block path
  -var root = '/'
  -var dist = root + "dist/";
  -var img = dist + 'img/';
  -var css = dist + 'css/';
  -var csslib = dist + 'css/lib/';
  -var js = dist + 'js/';
  -var jslib = dist + 'js/lib/';
```

``` /assets/jade/_config.jade
//- ****************************************************************************
//- サイト情報
//- ****************************************************************************
- var sitename = 'サイト名';
//- 各ページ毎に設定する変数
block settings
  -var title = "" + "｜" + sitename;
  -var description = "";
  -var keywords = "";
```

+ /assets/jade/base.jade
ページ全体のベース

```/assets/jade/base.jade
//- 設定ファイルを読み込み
include /_config
//- 
//- 参考：http://coliss.com/articles/build-websites/operation/work/generic-html5-template-by-sixrevisions.html
doctype html
html
  head
    block metas
      //- パフォーマンスのために使用する文字のエンコーディングを記述
      //- 参考: https://developers.google.com/speed/docs/best-practices/rendering#SpecifyCharsetEarly
      meta(charset='UTF-8')
      //- 
      //- IE8+に対して「IE=edge」と指定することで、
      //- 利用できる最も互換性の高い最新のエンジンを使用するよう指示できます
      //- 参考: https://www.modern.ie/en-us/performance/how-to-use-x-ua-compatible
      meta(http-equiv='X-UA-Compatible', content='IE=edge')
      //- 
      //- ページのタイトルを記述
      title #{title}
      //- 
      //- content属性にページの紹介文を記述
      meta(name='description', content='#{description}')
      //- 
      //- content属性にページの著者情報を記述
      meta(name='author',content='#{keywords}')
      //- 
      //- モバイル端末への対応、ページをビューポートの幅に合わせてレンダリング（Android, iOS6以降）
      //- ズームを許可しない設定「user-scalable=no」は加えない
      meta#viewport(name='viewport', content='width=device-width, initial-scale=1')
      //- 
    //- スタイルシートはできるだけ早くレンダリングされるため、HTMLドキュメントの上の方に記述
    block styles
      //- bowerでインストールしたパッケージ
      link(rel='stylesheet', href='#{csslib}bundle.min.css')
      link(rel='stylesheet', href='#{css}common.css')
      //- 
    //- href属性にファビコンファイルのURIを記述
    link(rel="shortcut icon" href="")
    //- 
    //- iOS/Android用のアイコン指定
    //- <meta name="mobile-web-app-capable" content="yes">
    //- <link rel="icon" sizes="196x196" href="">
    //- <link rel="apple-touch-icon" sizes="152x152" href="">
    block scripts
      //- bowerでインストールしたパッケージ
      script(src='#{jslib}bundle.min.js', charset='UTF-8')
      script(src='#{js}main.js', charset='UTF-8')
  body
    block header
      //- ヘッダーブロックを読み込み
      include /block/header
    block contents
      div#contents
    block footer
      //- フッターブロックを読み込み
      include /block/footer
```

+ /assets/jade/block/header.jade

```/assets/jade/block/header.jade
header
  ul 
    li: a(href="/") トップ
    li: a(href="/page/") 下層ページ
```

+ /assets/jade/block/footer.jade

```/assets/jade/block/footer.jade
footer &copy; 20XX Company inc.
```

### パッケージインストール

package.jsonに記載されているパッケージをインストールする。
展開したツールキットのフォルダ内に移動し、下記コマンドを実行。

```
npm install
```
※不調の場合はnpmキャッシュをクリアしてください。
参考：[npmのキャッシュ削除 - MELODIC-X](http://jnst.hateblo.jp/entry/2014/04/01/154210)


（``npm install`` が終了すると ``bower install`` が自動で実行されます。）

パッケージのインストールが完了すると、ファイルの移動が始まり、デプロイ用ディレクトリ（dist）に
各種ファイルが生成されます。
その後は、assets内でファイルの追加・変更を行うと、dist内にassetsと同じ構造でファイルがコピーされます。