HTML5 Conference 2013:今どきのGruntを使ったフロントエンド開発（HTML/CSS編）

今どきのGruntを使ったフロントエンド開発（HTML/CSS編） — MOL

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

@t32k

Why use Grunt?

Grunt: The JavaScript Task Runner

GUI Apps

Web Performance

Books

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!

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

t32k/maple

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の活動を支えています！

t32k/modern-development-workflow-with-grunt.md