静的サイト制作用の汎用gruntタスクテンプレートです。
mkdir yourProject
cd yourProject
git clone --recursive git@github.com:takumi0125/grunt-static-website-v3.git .
cd grunt
npm installgrunt コマンドで grunt/src/ の中身がタスクで処理され、ディレクトリ構造を保ちつつ htdocs/ に展開されます。ただし、「 _ (アンダースコア) 」で始まるファイルやディレクトリはコンパイル・コピーの対象外です。スプライト用のソース画像を格納するディレクトリや、Sassで@import するファイルは「 _ (アンダースコア) 」をつけておけば、 htdocs/ に展開されることはありません。
grunt watcher コマンドでローカルサーバが立ち上がります。実行中は
http://localhost:50000/
で展開後のページが確認できます。
src/_data.json は jade や assemble のタスクを実行する際に読み込まれます。
メタ情報等を定義しておけば、_data.jsonファイルで一元管理できます。
grunt
grunt/src/ の中身を各種タスクで処理し htdocs/ に展開します。
--rerealse オプションを指定すると、 JS ファイルを minify します。
grunt watcher
ディレクトリを監視し、変更があった場合適宜タスクを実行します。また、ローカルサーバを立ち上げます。 SSI インクルードに対応しています。
grunt bower
bower.json で定義されているJSライブラリを htdocs/assets/_lib/ にインストールします。開発開始時に実行して下さい。
その他のタスクは gruntfile.coffee をご参照ください。
スプライト画像、browserify, jsのconcat, coffee scriptのconcatを使用する場合は、以下の関数を使用し、タスクを定義してください。 以下の関数を実行すると、watchタスクも同時に定義されます。
個別タスクは
#################
### 個別タスク ###
#################
と
### 個別タスクここまで ###
の間に記述してください。
※ SRC_DIR はソースファイルの格納ディレクトリです。
spritesmith のタスクを生成する関数です。
※ スプライト生成には grunt-spritesmith を使用しています。
※ 画像の圧縮には imagemin-pngquant を使用しています。
Params
taskName{Object}: タスクを識別するための名前 すべてのタスク名と異なるものにするcssDir{String}: ソース画像ディレクトリへのパス (SRC_DIRからの相対パス)imgDir{String}: ソース CSS ディレクトリへのパス (SRC_DIRからの相対パス)outputImgName{String}: CSS に記述される画像パス (相対パスの際に指定する)outputImgPath{String}: 指定しなければ #{taskName}.png になるcompressImg{Boolean}: 画像を圧縮するかどうか
"#{SRC_DIR}#{imgDir}/_#{taskName}/"以下にソース画像を格納しておくと
"#{SRC_DIR}#{cssDir}/_#{taskName}.scss"と
"#{SRC_DIR}#{imgDir}/#{outputImgName or taskName}.png"が生成されます。
coffee script で concat する場合のタスクを生成する関数です。
Params
taskName{Object}: タスクを識別するための名前 すべてのタスク名と異なるものにするsrc{Array|String}: ソースパス node-glob のシンタックスで指定outputDir{String}: 最終的に出力される js が格納されるディレクトリoutputFileName{String}: 最終的に出力される js ファイル名(拡張子なし)
browserify のタスクを生成する関数です。coffee script と bowerを使用できます。
bowerを使用する場合は、タスク実行前に
bower install
を実行してください。
※ 引数に src entries を除いた全ソースファイルを指定している理由は、coffeeInclude の watchタスクから除外するためです。
Params
taskName{Object}: タスクを識別するための名前 すべてのタスク名と異なるものにするentries{Array|String}: browserify の entriesオプションに渡す node-glob のシンタックスで指定src{Array|String}: entries を除いた全ソースファイル ( watch タスクで監視するため) node-glob のシンタックスで指定outputDir{String}: 最終的に出力されるjsが格納されるディレクトリoutputFileName{String}: 最終的に出力される js ファイル名(拡張子なし)
javascriptのconcatタスクを生成する関数です。ソースは minify されます。
Params
taskName{Object}: タスクを識別するための名前 すべてのタスク名と異なるものにするsrc{Array|String}: ソースパス node-glob のシンタックスで指定outputDir{String}: 最終的に出力される js が格納されるディレクトリoutputFileName{String}: 最終的に出力される js ファイル名(拡張子なし)