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

概要

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

機能一覧

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

動作環境の構築

git (bowerが使用します)

Windowsの方はGit for Windowsからインストーラーを取得してください。

Homebrewの場合

brew install git

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

git -v

Node.js

インストーラを使用する場合は、ダウンロードページから取得してください（環境によって適宜インストールしてください）。

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

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

################################################################################
# paths
################################################################################

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

st_root = "./"

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

assets = "assets/"

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

dist   = "dist/"

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

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}"
    ]

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

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
################################################################################

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

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 © 20XX Company inc.

パッケージインストール

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

npm install

※不調の場合はnpmキャッシュをクリアしてください。
参考：npmのキャッシュ削除 - MELODIC-X

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

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