2014/3/8 の『現場のプロが教えるWeb制作の最新常識』発売記念イベントのセッションで使用したスライドです。

1. 早く家へ帰るための
Grunt入門
［＋gulp紹介］
前川 昌幸

3. The JavaScript Task Runner

4. Why use a task runner?
In one word: automation. The less work you have to do when
performing repetitive tasks like minification, compilation, unit
testing, linting, etc, the easier your job becomes. After you've
configured it, a task runner can do most of that mundane work
for you—and your team—with basically zero effort.

5. Why use a task runner?
一言で自動化。ミニファイ・コンパイル・ユニットテ
スト・文法チェックなどの細々とした作業を簡単に。
設定をしてしまえばタスクランナーが反復作業を基本
労力ゼロにできる。

6. 今日の内容

7. •
Getting started
•
CSS Preprocessors/CSS Postprocessors
•
JavaScript Concat,Linting,Minify
•
Image Optimization
•
First Step

9. Getting started
Node.js環境

10. http://nodejs.org/

12. Node環境を用意していない人は
まずカレントバージョンを

13. Windowsの場合は
環境変数でパスを通しておいてください

14. https://www.npmjs.org/

16. Getting started
grunt-cliの導入

17. ターミナル/コマンドプロンプト
(sudo) npm install -g grunt-cli

18. grunt-cli
Gruntのコマンドラインインターフェース。
Grunt自体は各プロジェクトごとにインストール。

19. Getting started
プロジェクトの作成

20. プロジェクトの作成

21. CLIでディレクトリに

22. Getting started
ディレクトリ構成の決定（とりあえず）

23. ※あくまで一例

24. さあGrunt！
の前に…
npm init

25. プロジェクトの諸情報を記録する
package.jsonを生成

26. ここにnpmパッケージ群を記録
共有ができるようになる

27. さあGrunt！
npm install grunt --save-dev

28. ほぼ必須
npm install grunt-contrib-connect
grunt-contrib-watch grunt-contrib-concat
--save-dev

29. •
grunt-contrib-connect：簡易サーバー機能
•
grunt-contrib-watch：ファイル更新の監視
•
grunt-contrib-concat：ファイルの結合

30. Getting started
Gruntfile.jsの作成

31. 基本はココ…
http://gruntjs.com/getting-started#the-gruntfile

32. module.exports = function(grunt) {
// package.jsonの読み込み
grunt.initConfig({
pkg: grunt.file.readJSON('package.json')
});
!
// Grunt Plaginsの読み込み
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-concat');
};

33. CSS Preprocessors
CSS Postprocessors
環境は構築している前提で

34. Compass
grunt-contrib-compass

35. CSSO:CSSの最適化
grunt-csso
CSScomb:CSSプロパティの整列
grunt-csscomb

36. メディアクエリの整理
grunt-combine-media-queries
プリフィクスの整理
grunt-autoprefixer

37. タスクの登録

38. コンパイルものの基本形
csso: { // タスク名
default: { // ターゲット名
src: “asset/css/style.css", // 入力ファイル
dest: "asset/css/style.css" // 出力ファイル
}
}

39. オプションのあるもの
autoprefixer:{
options: {
browsers: ['last 2 version', 'ie 8', 'ie 9']
},
default: {
src: "asset/css/style.css",
dest: "asset/css/style.css"
}
}

40. compass: { //切り分ける場合ターゲット名をつける
dist: { // 製品用
options: {
sassDir: "source/sass",
cssDir: "asset/css",
environment: "production"
}
},
dev: { // 開発用
options: {
sassDir: "source/sass",
cssDir: "asset/css"
}
}
}

41. Compassはconfig.rbを
利用することも可能
（sourcemap使いたい時とか）

42. 実行タスクを登録
// 開発用
grunt.registerTask('default', ['compass:dev']);
!
// 製品用
grunt.registerTask('dist', [‘compass:dist',
'autoprefixer','cmq','csscomb','csso']);

43. Postprocessorを
製品版だけにするかはお好みで

44. あと、CSSをそれなりに書けるあなたは…
grunt-contrib-csslint

45. JavaScript
Concat,Linting,Minify

46. JSHint：構文チェック
grunt-contrib-jshint

47. jshint: {
options: { // チェックオプションファイル
jshintrc: 'source/javascript/.jshintrc'
},
src: { // チェック対象ファイル
src: ['source/javascript/*.js']
}
}

48. {
// "use strict" を強制
"strict" : true,
"indent" : 2,
// インデントの深さ
"maxlen" : 0,
// 一行の最大長
// 宣言したきり使っていない変数を検出
"unused" : true,
!
// グローバル変数へのアクセスの管理
// グローバル変数へのアクセスを禁止
"undef" : true,
// ブラウザ用のやつは許可
"browser" : true,
"dojo" :
true,
// dojo tool kit用のやつは許可
"devel" : true,
//
consoleやalertを許可
"debug"
: true, // debugger を許可
"jquery" : true,
"globals": {
"_": false,
"Backbone": false
},
!
// Relaxing Options - 危険性を認識した上で設定すること
"eqnull" : true,
"expr" : true
}
// == null を許可
// x || (x = 1); とかができるようにする

49. 使いどころ
製品用には使うとして
開発用に入れるとチェックが入りすぎる
要所でgrunt jshint
でのチェックを利用

50. ライブラリなどは？
私はチェック対象に入れない
別ディレクトリを作成してそこに格納

51. UglifyJS：ミニファイ
grunt-contrib-uglify

52. その前に結合

53. concat: {
default: {
src: [
“source/jslib/jquery-1.11.0.min.js",
“source/jslib/jquery.heightLine.js",
"source/javascript/*.js"],
dest: "asset/js/sitescript.js"
}
}

54. そしてミニファイ
（実は結合もできる）

55. uglify: {
default: {
src: [
“source/jslib/jquery-1.11.0.min.js",
“source/jslib/jquery.heightLine.js",
"source/javascript/*.js"],
dest: "asset/js/sitescript.js"
}
}

56. ライセンスどうしてますか？

57. 私は最後に結合してます
concat: {
（略）
license: {
src: [
“source/license/license.js",
"asset/js/sitescript.js"],
dest: "asset/js/sitescript.js"
}
}

58. Image Optimization

59. とりあえず印の…
grunt-contrib-imagemin

60. あまり圧縮効率が良くないという評判
UNIX系OS（Mac含む）なら
grunt-imageもいいかも

61. imagemin: {
dynamic: {
files: [{
expand: true,
cwd : "source/img/",
src: "**/*.{png,jpg,gif}",
dest: "asset/img/"
}]
}
}

62. First Step
ここまでは準備！これから本番！

63. 簡易サーバー
grunt-contrib-connect

64. connect: {
uses_defaults: {}
}
http：//0.0.0.0：8000

65. 更新ファイルの監視
grunt-contrib-watch

66. watch: {
options: {
livereload: true
},
compassdev: {
files: 'source/**/*.scss',
tasks: ['compass:dev']
},
jsdev: {
files: 'source/**/*.js',
tasks: ['concat:jsdefault']
},
（以下略

67. defaultに登録
grunt.registerTask(
‘default',['connect','watch']);

68. アナタはただゴリゴリコードを書くだけ！

69. さて…

71. いろいろとありますが
何はともあれ設定ファイルの記述が違う

72. JSON
JavaScript
宣言型
手続き型

73. 今回のサンプルは
https://github.com/maepon/wdnr-sem-sample

74. ありがとうございました
@maepon