generator-giraffe

A generator for html5 website

generator-giraffe

A generator for Yeoman.
高速化を念頭に置いて作成した静的サイト構築用ジェネレータです。

  • ディレクトリの初期構築
  • CoffeeScriptのコンパイル
  • TypeScriptのコンパイル
  • Sassのコンパイル
  • css/jsファイルの結合&圧縮
  • jsHintによるチェック
  • cssLintによるチェック
  • cssの重複プロパティチェック
  • cssの不要プレフィックス削除
  • este-watchによるファイル更新の監視→コンパイル・結合・圧縮・デバッグの自動化
  • 自動ブラウザリロード
  • jQueryの取得(バージョン指定可)
  • mixinライブラリ(bourbon)を搭載
  • 最新normalize/modernizr/font-awesomeの取得
  • spritesmithによるsprite作成
  • grunt-kssによるスタイルガイド生成
  • 各種mixinなどのscssライブラリを追加
  • Jadeに対応

使用する前に以下のツール群をインストールする必要があります。
一部古いNode.jsに対応していないものもあるため、 バージョンが古い場合は、できるだけアップデートしておくことを推奨します。
Windows環境ではRubyのインストール、MacとWindow両方ともSass/Compassのインストールが前提になります。

$ npm install -g yo grunt-cli bower livereloadx
$ gem install csscss

generator-giraffeをインストールします。

npm install -g generator-giraffe

任意のディレクトリを作成して移動し、yo giraffe & grunt startを実行します。
環境によっては実行前にgit config --global url."https://".insteadOf git://を実行する必要があります。

mkdir hogehoge
cd hogehoge
yo giraffe && grunt start

yeomanからの質問形式で以下の設定を行います。

  • 開発者名(packageのauthorに入ります)
  • localhost(プロジェクト名)
  • ルートディレクトリ名
  • OS選択(YesでMac,NoでWin)
  • TypeScriptを使用するかどうか
  • CoffeeScriptを使用するかどうか
  • Jadeを使用するかどうか
  • FontAwesomeを使用するかどうか
  • jQueryのバージョン(無記入で最新版)
  • 共通リソースディレクトリ名
  • コンパイル言語ファイルの格納先
  • 開発ツールディレクトリ名
  • ドキュメントディレクトリ名

質問に返答後、返答内容に応じたディレクトリが構成され、
node_module等が自動的にインストールされます。

####js,cssファイルの結合

Gruntfile.jsを開き、結合したいcss,jsのパスを通します。
上から順に結合されていくので、順番を間違えないようにしてください。
ちなみにGrunt.jsにおいてルート相対・絶対パスは認識されません。

concat: {
    style: {
        src: [
            '<%= path.root %>/<%= path.src %>/css/normalize.css',
            '<%= path.root %>/<%= path.src %>/css/hogehoge.css'
        ],
        dest: '<%= path.root %>/<%= path.src %>/css/dest/style-all.css'
    },
    run: {
        src: [
            '<%= path.root %>/<%= path.src %>/js/modernizr.js',
            '<%= path.root %>/<%= path.src %>/js/jquery.min.js',
            '<%= path.root %>/<%= path.src %>/js/hogehoge.js'
        ],
        dest: '<%= path.root %>/<%= path.src %>/js/dest/run-all.js
    }
},

cmd_batまたはcmd_commandフォルダの中にあるgrunt_watch.batまたはgrunt_watch.commandを叩いてください。
Grunt.jsで設定したlocalhost名でページが開き、ファイルの監視が始まります。 Sublime Text2でlivereloadのプラグインを入れてる人は、バッティングするのでプラグインをremoveしてから使ってください。
この後、コンソールは出したままにしておいてください。最小化しても大丈夫です。
以降はscss/coffee/js(Sassのみの時)が更新される度に自動的にコンパイル・結合・圧縮・デバッグが行われます。
さらに、htmlとcss(sassを使っている人はscss更新時)の更新時に自動でブラウザがリロードされます。
コンソールは消さずに出したままにしておいてください。監視をやめたい場合はコンソール上でCtrl+Cを押してください。
任意のタイミングでコンパイル・結合・圧縮・デバッグを行いたい場合はgrunt_command.batまたはgrunt_command.commandを叩くか、コンソール上で「grunt」と打ち込んでください。

Firefox
http://feedback.livereload.com/knowledgebase/articles/86242-how-do-i-install-and-use-the-browser-extensions-
「Firefox extension」というやつです。

Chrome
https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei

あとは追加されたアドオンのマークを押して、丸の中が赤くなれば成功です。
ファイル監視を行っている最中に行ってください。
後はhtmlまたはcss(sassの人はscss)を編集して保存した際にブラウザがリロードされればok。

cmd_batまたはcmd_commandフォルダの中にあるgrunt_style-guideを叩くとstyleguideの作成が始まります。初期設定ではtemplate格納先はstyleguide_tempフォルダに、出力先はmodulesフォルダ内に設定されています。

cmd_batまたはcmd_commandフォルダの中にあるgrunt_checkを叩くと重複プロパティのチェックとcss/jsのlint/hintが始まります。初期設定では/common/css/destと/common/js/dest内にチェックの指定先が設定されています。lintの設定等はGruntfile.jsを書き換えて設定可能です。

不要なプレフィックスを削除するためにautoprefixerを使用しています。ブラウザのバージョン指定はGruntfile.jsの下記部分になります。こちらのバージョンは変更可能です。下記リンクを参考にしてください。

/* cssファイルの不要prefix消去
 ------------------------------------------------------------------------*/
autoprefixer: {
    options: {
        // ブラウザのバージョン指定
        browsers: ['last 2 version', 'ie 8']
    },
    no_dest: {
        src: '<%= path.root %>/<%= path.src %>/css/dest/*.css'
    }
},

Compassで毎回書き出すと遅くなるので、Compassのスプライトシート生成はgrunt-spritesmithで代用しています。cmd_batまたはcmd_commandフォルダの中にあるgrunt_spriteを叩くとスプライトシートの生成が始まります。初期設定では/common/img/sprite内のpng画像が結合され、/common/img/にsprite.pngとして書き出されます。また、スタイルの設定ファイルは/common/compile/scss/lib/_sprite.scssに上書きされます。

MIT License