modern-development-workflow-with-grunt.md

SassなどのCSSプリプロセッサを使うWebデザイナが増えてきました。Sassをコンパイルするだけなら黒い画面（ターミナル）を使わずともGUIアプリからの利用で問題ありません。が、ここは一歩踏み込んでGrunt（JavaScript製のタスクランナー）を使って、Sass以外のコンパイルやライブリロード、画像最適化、CSSのリントやスタイルガイド生成など、あらゆる作業をGruntに任せてより効率的な開発環境を手に入れてみませんか。

---

会場のネットワークでDLしないでね♥帰ってから復習しましょう♪

---

@t32k

Why use Grunt?

Grunt: The JavaScript Task Runner

GUI Apps

• CodeKit — THE Mac App For Web Developers
• Koala - a gui application for LESS, Sass, Compass and CoffeeScript compilation.
• Prepros :: Compile Sass, less or any preprocessing language

Web Performance

• High Performance Web Sites
• Twitter / Search - #perfmatters
• HTTPリクエストを減らすために【終章】我々には1000msの猶予しか残されていない — MOL

Books

• O'Reilly Japan - ハイパフォーマンスWebサイト
• High Performance Browser Networking
• O'Reilly Japan - ハイパフォーマンスJavaScript

How to use Grunt

node.js

$ npm install grunt-cli -g

Package.json

• Package.json

$ npm init

$ npm install grunt --save-dev
$ npm install grunt-csso --save-dev

Gruntfile

• Sample Gruntfile - Grunt: The JavaScript Task Runner

$ npm install grunt-init -g
$ git clone https://github.com/gruntjs/grunt-init-gruntfile.git ~/.grunt-init/gruntfile
$ grunt-init gruntfile

// Load the task:
grunt.loadNpmTasks('grunt-csso');

// Configure the task:
grunt.initConfig({
  csso: {
    dist: {
      files: {
        'output.css': ['input.css']
      }
    }
  }
});

// Register the task:
grunt.registerTask('default', ['csso']);

Customize your Gruntfile!

• Plugins - Grunt: The JavaScript Task Runner
• grunt-aoimiyazaki を作った - Qiita
• t32k:npmjs

$ npm install grunt-init -g
$ git clone https://github.com/gruntjs/grunt-init-gruntplugin.git ~/.grunt-init/gruntplugin
$ grunt-init gruntplugin

t32k/maple

• CSScomb — MOL
• CSSOとGRUNT-CSSO — MOL
• 部屋とYシャツと私 — MOL
• HTTPリクエストを減らすために【CSS Sprite編】スプライト地獄からの解放 — MOL
• HTTPリクエストを減らすために【WebFont編】ドラッグ＆ドロップ — MOL
• grunt-initとYeoman — MOL

Jet Start

• Yeoman - Modern workflows for modern webapps

$ npm install yo -g
$ npm install generator-maple -g
$ mkdir your_proj && cd $_
$ yo maple
$ grunt

yo maple demo - YouTube.

用語集

Node.js : サーバーサイドJavaScript
NPM : Node Package Module、パッケージ管理ツール（プラグイン管理的な）
Git : 分散型バージョン管理システム（ソースコード管理に使われるもの）
Grunt : JavaScript製のタスクランナー（面倒なタスクを実行してくれるもの）
Yeamon : Web開発のためのイケてるワークフロー
リント : 文法チェック的な
スキャフォールディング : 足場作り、プロジェクトに必要なファイル一式を生成すること
コンパイル : コードを機械語に変換すること（ここではコンバート的な意味合い）
ビルド : コンパイルなどを行い、最終的な実行可能なソフトウェアにすること
デプロイ : ソフトウェア（Webサービスなど）を利用可能な状態にすること
cd : Change Directory、現在のディレクトリを移動するコマンド
mkdir : MaKe DIRectory、ディレクトリを作成するコマンド

---

#html5j

アンケートにご協力ください！あなたのフィードバックが、html5jの活動を支えています！

アンケートへ答えた方にもれなく記念品プレゼント！
（アンケートの完了画面を1Fに受付にてご提示ください）

お知らせ：最終スペシャルセッションの開始時刻が変更になりました。
10分早まっています。ご注意ください。（18:30 -> 18:20）