2014/03/28 社内勉強会資料

1. Grunt導入しよう！
の話

3. Gruntとは？
• Node.jsで動くタスクランナー
• Webフロントエンドにフォーカスした
ビルドツール
• プラグイン指向

4. 何ができるの？
• Webリソース最適化処理の自動化
• JS/CSSファイルの結合、圧縮
• CSSスプライト用画像+CSSファイルの生成
• PNG/JPEGファイルサイズの最適化
• AltJS/Sass/LESSコンパイルの自動化
• JSスクリプトのユニットテスト実行
• JS/CSSのlint(文法などの静的チェック)実行

5. Webリソース最適化の重要性は
書籍を参考ください

6. どうやって使う？
• コマンドラインでインストール
• 設定ファイル(Gruntfile.js)を記述
• コマンドラインで実行

7. 設定ファイル例
// Gruntfile.js
module.exports = function(grunt){
grunt.registerTask('say_hello', 'say hello', function(){
grunt.log.ok('hello!');
});
grunt.registerTask('say_goodbye', 'say goodbye', function(){
grunt.log.ok('goodbye!');
});
};

8. なぜ使うのか？
• 繰り返し実行する処理の自動化
• タスクの設定ファイル化

9. ファイル化の利点
• 複雑な実行パラメータ覚える必要なし
• バージョン管理できる
• チームメンバー間で共有できる
• 「開発ワークフローの共有」による
「属人化の排除」

10. Gruntプラグイン
• 多くのプラグインが公開されており、
簡単にインストールして利用できる
• パラメータを指定するだけで利用可能
• grunt-* で公開されているので検索簡単
• grunt-contrib-* は公式プラグイン

11. 公式プラグイン
• grunt-contrib-concat ファイル結合
• grunt-contrib-uglify jsのminify
• grunt-contrib-mincss cssのminify
• grunt-contrib-compass Sassとかcss sprite
• grunt-contrib-qunit jsユニットテスト実行
• etc...

12. Gruntインストール
• 「Grunt 導入」とかでググって参考！
• コピペが出来るなら誰でも出来る、Web制作タスク自動化ツール「Grunt」導入手順
• ブラックなWeb開発現場の救世主、Gruntのインストールと使い方
• Web デザイナーさん向け Grunt を使った コーディング作業の効率化、はじめの一歩
• Web制作で面倒な作業を自動化するビルドツール、Grunt v0.4 入門
• Gruntを使ってプロジェクトを自動化する、Myタスクメモ
• 今更だけどやるgrunt入門編・インストールから基本的な使い方
• etc...

13. デモ
• インストールと実行
$ npm install -g grunt-cli
$ npm init
$ npm install grunt --save-dev
$ npm install grunt-contrib-concat --save-dev
$ echo 'module.exports = function(grunt){
grunt.initConfig({
concat: { "min.js": ["a.js", "b.js"] }
});
grunt.loadNpmTasks("grunt-contrib-concat");
};' > Gruntfile.js
$ echo 'console.log("a");' > a.js
$ echo 'console.log("b");' > b.js
$ grunt concat

14. プラグイン探し方
• http://gruntjs.com/plugins へアクセス
• npmリポジトリから grunt-* が抽出さ
れて一覧表示されている

15. プラグインの使い方
• たいてい公開リポジトリの README に
書いてある
• npmコマンド１発でページが開けるよ
• $ npm home grunt-contrib-uglify

16. 設定ファイル書き方
• その前に Multi Tasks と ターゲット
• Multi Tasksは複数の設定を持つ
• 例えばファイル結合はjsとcssそれぞ
れ異なる設定で実行したいよね
concatプラグインはMulti Tasks

17. 複数ターゲット例
grunt.initConfig({
concat: {
options: { /* 共通の設定 */ },
// jsターゲット、$ grunt concat:js で実行される
js: {
options: { /* jsターゲットの設定 */ },
src: ["a.js", "b.js"],
dest: "min.js"
},
// cssターゲット、$ grunt concat:css で実行される
css: {
options: { /* cssターゲットの設定 */ },
src: ["a.css", "b.css"],
dest: "min.css"
}
// $ grunt concat で全ターゲット実行
}
});

18. IN/OUTファイル指定
grunt.initConfig({
concat: {
compact_format: {
src: ["a.js", "b.js"],
dest: "min.js"
},
files_object_format: {
files: {
"min.1.js": ["a.js", "b.js"],
"min.2.js": ["c.js", "d.js"]
}
},
files_array_format: {
files: [
{src: ["a.js", "b.js"], dest: "min.1.js"},
{src: ["c.js", "d.js"], dest: "min.2.js"}
]
}
}
});
• filter/expandの指定で差異あり(詳細割愛)

19. 古い形式の指定方法
grunt.initConfig({
concat: {
"min.1.js": ["a.js", "b.js"],
"min.2.js": ["c.js", "d.js"]
}
});
• 非推奨だが、古くからあるプラグイン
の README でこの記述が残っていたり
する

20. カスタムタスク
// 複数のタスクを束ねる
grunt.registerTask("task_name", "description(optional)", ["a", "b", "c"]);
// 引数なし実行時のデフォルト実行タスク
grunt.registerTask("default", ["a", "b", "c"]);
// カスタムタスク (NodeJSのスクリプト)
grunt.registerTask("default", function(){
// do something...
});
• grunt.registerTaskメソッドで定義

21. 定義済みタスク確認
• $ grunt --help
• grunt.registerTask()の省略可能な2番目
の引数は一覧出力時に表示される

22. 最後にデモ