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

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

Gruntfile の書き方

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

• Yeoman – Modern workflows for modern webapps
• Yeoman: フロントエンド開発のワークフローを提供するツール | deadwood

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

• MY GRUNTFILE
• Gruntfileを整理してタスクの自動化を進めた ::ハブろぐ
• ahomu/grunt-sandbox
• 自分専用の Boilerplate を作ってみた | blog.makitasako.com
• ぼくがかんがえたさいきょうのGruntfileを晒してみる – Qiita [キータ]
• Gruntfile.cofee
• grunt-init-static-website/root/Gruntfile.coffee at master · sonicjam/grunt-init-static-website
• オレオレGruntfile.js | spec5zigen Creator's Lab.
• オリジナルビルド環境をGrunt 0.4.xへ移行｜Blog｜Skyward Design

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

• ぼくのかんがえたさいきょうのしーえしゅえしゅ — MOL
• オリジナルテンプレート・ビルド環境2013年版の作成メモ｜Blog｜Skyward Design

grunt-contrib

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

grunt-contrib-clean

Clean files and folders.

grunt-contrib-coffee

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

• Mochaを使ってJavaScriptのテストをブラウザで実行してみよう （1/3）：CodeZine
• Mocha + Chai で CoffeeScript を Grunt で自動テスト – Qiita [キータ]

grunt-contrib-compass

Compile Sass to CSS using Compass

• Grunt: Compass のコンパイルと監視を行う

grunt-contrib-compress

Compress files and folders.

• Grunt: JavaScript や CSS を gzip する

grunt-contrib-concat

Concatenate files.

• Grunt: ファイルを結合する

grunt-contrib-connect

Start a connect web server.

• Grunt: サーバを立ててLiveReload をつかう

grunt-contrib-copy

Copy files and folders.

• Grunt: ファイルをコピーする

grunt-contrib-cssmin

Compress CSS files.

• Grunt: css ファイルの結合・圧縮をする

grunt-contrib-csslint

Lint CSS files.

• Grunt: css/js と lint/hint

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 を圧縮する

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

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 [キータ]
• RequireJSでjQueryを使う方法をまとめてみた – へびにっき
• RequireJSをプロジェクトで使ってみての所感 – ダーシマ・ヱンヂニヤリング
• grunt-contrib-requirejsを試してみた – SinDiary

grunt-contrib-sass

Compile Sass to CSS

grunt-contrib-stylus

Compile Stylus files to CSS.

grunt-contrib-uglify

Minify files with UglifyJS.

• Grunt: JavaScript ファイルの結合・難読化・圧縮をする

grunt-contrib-watch

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

• Grunt: サーバを立ててLiveReload をつかう

grunt-contrib-yuidoc

Compile YUIDoc Documentation.

• Grunt: YUIDoc

その他のプラグイン

grunt-init

• grunt-init でプロジェクトのひな型を scaffold する | deadwood

grunt-rsync

• Grunt: rsync で開発サーバへ deploy する | deadwood

grunt-markdown-pdf

• Grunt: markdown を pdf に変換する | deadwood

grunt-php

• Grunt: PHP のビルドインサーバを使う | deadwood

grunt-imageoptim

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

• grunt-imageoptim で画像を最適化する | deadwood

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

grunt-connect-proxy

Apache に接続できるそう。

• drewzboto/grunt-connect-proxy · GitHub
• Gruntのconnectで静的サーバーを動かしつつも、動的なページを表示させたい｜Blog｜Skyward Design

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