[Grunt & Yeoman] Grunt: 落ち穂拾い

Grunt, Gruntfile まわりで参考にさせて頂いたソースや、気になったプラグインなどまとめ。

[markdown]
## Gruntfile の書き方

Yeoman を参考にするのが王道のよう。

> * [Yeoman – Modern workflows for modern webapps](http://yeoman.io/)
> * [Yeoman: フロントエンド開発のワークフローを提供するツール | deadwood](https://www.d-wood.com/blog/2014/02/12_5469.html)

個人的には、Gruntfile を公開・解説されている方のエントリが大変参考になりました。

> * [MY GRUNTFILE](http://mygrunt.kageya.ma/)
> * [Gruntfileを整理してタスクの自動化を進めた ::ハブろぐ](http://havelog.ayumusato.com/develop/javascript/e514-grunt_arrange_task.html)
> * [ahomu/grunt-sandbox](https://github.com/ahomu/grunt-sandbox)
> * [自分専用の Boilerplate を作ってみた | blog.makitasako.com](http://blog.makitasako.com/posts/2013-05-28-myproject/)
> * [ぼくがかんがえたさいきょうのGruntfileを晒してみる – Qiita [キータ]](http://qiita.com/masamunet/items/34022da57e2143d9084a)
> * [Gruntfile.cofee](https://gist.github.com/shuuheyhey/6728126)
> * [grunt-init-static-website/root/Gruntfile.coffee at master · sonicjam/grunt-init-static-website](https://github.com/sonicjam/grunt-init-static-website/blob/master/root/Gruntfile.coffee)
> * [オレオレGruntfile.js | spec5zigen Creator's Lab.](http://lab.spec5zigen.com/archives/mygruntfile-js/)
> * [オリジナルビルド環境をGrunt 0.4.xへ移行|Blog|Skyward Design](http://www.skyward-design.net/blog/archives/000159.html)

grunt だけでなく、.scss ファイルのレイアウトなど、参考にしながら勉強していきたい。

> * [ぼくのかんがえたさいきょうのしーえしゅえしゅ — MOL](http://t32k.me/mol/log/the-perfect-css-i-thought/)
> * [オリジナルテンプレート・ビルド環境2013年版の作成メモ|Blog|Skyward Design](http://www.skyward-design.net/blog/archives/000155.html)

## grunt-contrib

基本的なタスクはこれだけでまかなえる、公式プラグイン達。
さわれていないものもいくつかある。

### grunt-contrib-clean

Clean files and folders.

### grunt-contrib-coffee

Compile CoffeeScript files to JavaScript.
こちらは CoffeeScript のコンパイル。
後述のプラグインも含め、JavaScriptのテスト系がよく分からない。

> * [Mochaを使ってJavaScriptのテストをブラウザで実行してみよう (1/3):CodeZine](http://codezine.jp/article/detail/7367)
> * [Mocha + Chai で CoffeeScript を Grunt で自動テスト – Qiita [キータ]](http://qiita.com/astronaughts/items/483e04ac27bf8edde210)

### grunt-contrib-compass

Compile Sass to CSS using Compass

> * [Grunt: Compass のコンパイルと監視を行う](https://www.d-wood.com/wpmt/wp-admin/post.php?post=5027&action=edit)

### grunt-contrib-compress

Compress files and folders.

> * [Grunt: JavaScript や CSS を gzip する](https://www.d-wood.com/wpmt/wp-admin/post.php?post=5071&action=edit)

### grunt-contrib-concat

Concatenate files.

> * [Grunt: ファイルを結合する](https://www.d-wood.com/wpmt/wp-admin/post.php?post=5250&action=edit)

### grunt-contrib-connect

Start a connect web server.

> * [Grunt: サーバを立ててLiveReload をつかう](https://www.d-wood.com/wpmt/wp-admin/post.php?post=5033&action=edit)

### grunt-contrib-copy

Copy files and folders.

> * [Grunt: ファイルをコピーする](https://www.d-wood.com/wpmt/wp-admin/post.php?post=5248&action=edit)

### grunt-contrib-cssmin

Compress CSS files.

> * [Grunt: css ファイルの結合・圧縮をする](https://www.d-wood.com/wpmt/wp-admin/post.php?post=5065&action=edit)

### grunt-contrib-csslint

Lint CSS files.

> * [Grunt: css/js と lint/hint](https://www.d-wood.com/wpmt/wp-admin/post.php?post=5042&action=edit)

### grunt-contrib-handlebars

Precompile Handlebars templates to JST file.

### grunt-contrib-htmlmin

Minify HTML

### grunt-contrib-imagemin

Minify PNG, JPEG and GIF images

> * [Grunt: png, jpg, gif を圧縮する](https://www.d-wood.com/wpmt/wp-admin/post.php?post=5068&action=edit)

### grunt-contrib-jade

Compile Jade templates.
ざっくり調べた感触ではよく見かけました。
他には slim とか。

### grunt-contrib-jasmine

Run jasmine specs headlessly through PhantomJS.

### grunt-contrib-jshint

Validate files with JSHint.

> * [Grunt: css/js と lint/hint](https://www.d-wood.com/wpmt/wp-admin/post.php?post=5042&action=edit)

### grunt-contrib-jst

Precompile Underscore templates to JST file.

### grunt-contrib-less

Compile LESS files to CSS.

### grunt-contrib-nodeunit

Run Nodeunit unit tests.

### grunt-contrib-qunit

Run QUnit unit tests in a headless PhantomJS instance.

### grunt-contrib-requirejs

Optimize RequireJS projects using r.js.
Yeoman でも使われているよう。

> * [grunt.js – Grunt入門 – Qiita [キータ]](http://qiita.com/svartalfheim/items/3968fd94da05f565d18f)
> * [RequireJSでjQueryを使う方法をまとめてみた – へびにっき](http://tkyk.name/blog/2012/11/22/requirejs-with-jquery/)
> * [RequireJSをプロジェクトで使ってみての所感 – ダーシマ・ヱンヂニヤリング](http://tsmd.hateblo.jp/entry/2013/08/06/165357)
> * [grunt-contrib-requirejsを試してみた – SinDiary](http://d.hatena.ne.jp/sinmetal/20130331/1364742840)

### grunt-contrib-sass

Compile Sass to CSS

### grunt-contrib-stylus

Compile Stylus files to CSS.

### grunt-contrib-uglify

Minify files with UglifyJS.

> * [Grunt: JavaScript ファイルの結合・難読化・圧縮をする](https://www.d-wood.com/wpmt/wp-admin/post.php?post=5063&action=edit)

### grunt-contrib-watch

Run predefined tasks whenever watched file patterns are added, changed or deleted.

> * [Grunt: サーバを立ててLiveReload をつかう](https://www.d-wood.com/wpmt/wp-admin/post.php?post=5033&action=edit)

### grunt-contrib-yuidoc

Compile YUIDoc Documentation.

> * [Grunt: YUIDoc](https://www.d-wood.com/wpmt/wp-admin/post.php?post=5045&action=edit)

## その他のプラグイン

### grunt-init

> * [grunt-init でプロジェクトのひな型を scaffold する | deadwood](https://www.d-wood.com/blog/2014/09/15_6804.html)

### grunt-rsync

> * [Grunt: rsync で開発サーバへ deploy する | deadwood](https://www.d-wood.com/blog/2014/08/26_6710.html)

### grunt-markdown-pdf

> * [Grunt: markdown を pdf に変換する | deadwood](https://www.d-wood.com/blog/2014/09/03_6775.html)

### grunt-php

> * [Grunt: PHP のビルドインサーバを使う | deadwood](https://www.d-wood.com/blog/2014/09/02_6704.html)

### grunt-imageoptim

イメージファイルを minify する ImageOptim-CLI Grunt 版。

> * [grunt-imageoptim で画像を最適化する | deadwood](https://www.d-wood.com/blog/2014/09/16_6814.html)

以下、気になっているけど触れていない、その他のプラグイン。

### grunt-connect-proxy

Apache に接続できるそう。

> * [drewzboto/grunt-connect-proxy · GitHub](https://github.com/drewzboto/grunt-connect-proxy)
> * [Gruntのconnectで静的サーバーを動かしつつも、動的なページを表示させたい|Blog|Skyward Design](http://www.skyward-design.net/blog/archives/000166.html)

他にも色々あると思いますが、ひとまずメモっておきます。
[/markdown]