gulp勉強会

1. Gulp勉強会＠IVP

2. Gulpとは
gulpはNode.jsをベースとしたビルドシステムヘルパーです

3. 切り口変えよう

4. gulpでできること
フロントエンドにまつわる作業を
まとめて自動化できる

5.  Sass,Compassなどのコンパイル
 HTMLからmarkdown,プレーンテキストに変換
 CSS中に点在したメディアクエリーをまとめる
 CSSベンダープリフィックスの管理
 CSSプロパティ並び順整理
 コードの連結
 コードの圧縮
 コードの整形
 CSSスプライト生成
 画像圧縮
 markdownをPDFに変換
 Webページのスクリーンショット撮影
 画像サイズ変換
 コード構文チェック Lint
 ファイル書き出し
 圧縮/解凍
 FTPアップロード
 文字コード変換
 実体参照変換
 JSON,YAML,XML,PLIST,CSV の相互変換
 HTMLテーブルをCSVに変換
 サイトマップ作成
 sitemap.xml生成
 通知センターに通知
これらの作業をまとめて自動化できる！
gulpで自動化できること（一部）

6. gulpを使う前に

7. Gulpとは
gulpはNode.jsをベースとしたビルドシステムヘルパーです

8. Node.jsとは
サーバー側で動作する
Javascriptアプリケーションプラットホーム

9. Node.jsとは（間違いがち）
 プログラミング言語ではない
 サーバーソフトではない
 プログラミング言語のフレームワークではない
※ IISやapacheとは違うが、同じ役割をすることはできる

10. Node.jsとは（できること）
 Javascriptで動く
 Windowsでも動く
 サーバーで動く
 ファイルの読み書きもjavascriptでできちゃう
 DBとの連携もjavascriptでできちゃう

11. Node.jsとは（技術的特徴）
 非同期 (I/Oの処理結果を待たず処理を進める)
 シングルスレッド (メモリ消費が少ないので速い)
 C/C++プラグインで拡張可能
 イベントドリブン
 ノンブロッキングI/O（コールバック関数処理）

12. Node.jsとは（技術的特徴）
 非同期 (I/Oの処理結果を待たず処理を進める)
 シングルスレッド (メモリ消費が少ないので速い)
 C/C++プラグインで拡張可能
 イベントドリブン
 ノンブロッキングI/O（コールバック関数処理）

13. npmについて
 node.jsのモジュール管理システム
 install/uninstallをすべてnpmで行う
 各モジュールの依存関係を管理してくれる
 自分で開発したモジュールも公開できる
 インストールにはlocalとglobalの２つがある

14. そういえば

15. 今日の勉強会の名前、
「タスクランナーgulp」
って言ってなかったっけ？
ビルドシステムヘルパー
じゃなくない？

16. ミスです

17. タスクランナーとは
様々なタスクを自動的に実行し、
作業を効率化するツール

18. それ同じじゃん

19. タスクランナーといえば

20. Gruntについて
 フロントエンドのタスクを自動化するツール
 プラグインが多数あり、組み合わせることで自動化
 gulpより古い
 処理の１つの単位を「タスク」と呼ぶため「タスク
ランナー」と呼ばれる

21. Gruntとgulpの違い
Grunt gulp
 単一のプラグインを組み合わせる
 JSONでタスク定義を書く
 学習コストが高い
 プラグインを組み合わせてタスクを作る
 javascriptで処理をつないでいく
 学習コストが低い

22. Gruntとgulpの違い
Grunt gulp
 単一のプラグインを組み合わせる
 JSONでタスク定義を書く
 学習コストが高い
 プラグインを組み合わせてタスクを作る
 javascriptで処理をつないでいく
 学習コストが低い
→オブジェクト指向っぽい →スクリプト言語っぽい

23. 記述方法の比較

24. gulpの始め方（事前準備）

25. 事前準備（node.jsインストール）
Windowsはインストーラを実行するだけ

26. node.jsとnpmの確認

27. 事前準備（gulpインストール）
//global install
> npm install gulp -g
//local install
//local installは対象のディレクトリで行う
> npm install --save-dev gulp

28. gulpの始め方（タスク作成）

29. gulpfile.jsの作成
var gulp = require('gulp');
gulp.task('hello', function() {
console.log('Hello gulp!');
});
gulp.task('default', ['hello']);

30. デモ

31. 実践その１

32. 作成プログラム概要
１）cssフォルダ内にある拡張子がCSSのファイルを全て結合
２）１で結合したファイルをall.cssという名前で保存
３）all.cssをminify（圧縮）する
４）３で作成したファイルをall.min.cssという名前で保存
５）４で作成したファイルを出力

33. 使用プラグイン
 gulp-concat
 gulp-minify-css
 gulp-rename
npm install --save-dev

34. 使用プラグインのインストール
npm install –save –dev gulp-concat
npm install –save –dev gulp-minify-css
npm install –save –dev gulp-rename
npm install --save-dev

35. デモ

36. 作成プログラムに処理追加
１）cssフォルダ内にある拡張子がCSSのファイルを全て結合
２）１で結合したファイルをall.cssという名前で保存
３）all.cssをminify（圧縮）する
４）３で作成したファイルをall.min.cssという名前で保存
５）４で作成したファイルを出力
→上記の処理をファイルの更新があった場合に自動的に実行させる

37. デモ

38. 実践その２

39. 作成プログラムに処理追加
１）cssフォルダ内にある拡張子がCSSのファイルを全て結合
２）１で結合したファイルをall.cssという名前で保存
３）all.cssをminify（圧縮）する
４）３で作成したファイルをall.min.cssという名前で保存
５）４で作成したファイルを出力
→１～２と３～５を別のタスクとして記述する

40. ここで問題

41. Node.jsの問題
node.jsの処理は非同期で実行される

42. Node.jsの問題
処理１
処理３
処理２
並行処理される
＝どれが最初に終わるか分からない

43. 問題の解決
run-sequenceというプラグインを使う

44. 問題の解決
npm install --save-dev run-sequence
処理実行順を管理できるプラグインを使う
※gulp4.0では実行順序を指定できるAPIが提供される

45. デモ

46. 様々なプラグイン
http://gulpjs.com/plugins/
gulp pluginページ

47.  Sass,Compassなどのコンパイル
 HTMLからmarkdown,プレーンテキストに変換
 CSS中に点在したメディアクエリーをまとめる
 CSSベンダープリフィックスの管理
 CSSプロパティ並び順整理
 コードの連結
 コードの圧縮
 コードの整形
 CSSスプライト生成
 画像圧縮
 markdownをPDFに変換
 Webページのスクリーンショット撮影
 画像サイズ変換
 コード構文チェック Lint
 ファイル書き出し
 圧縮/解凍
 FTPアップロード
 文字コード変換
 実体参照変換
 JSON,YAML,XML,PLIST,CSV の相互変換
 HTMLテーブルをCSVに変換
 サイトマップ作成
 sitemap.xml生成
 通知センターに通知
これらの作業をまとめて自動化できる！
gulpで自動化できること（一部）

48. おまけ

49. StyleDoccoについて
 Node.jsで作られてるスタイルガイドジェネレーター
 CSSにMarkDown（Qiitaで使ってる奴）で書いたらHTML出力される
 gulpのプラグインで自動的に生成させたりできるらしい
 SassとかLessと組み合わせて使うといいかもね

50. StyleDoccoについての感想
 CSSファイルが肥大化しそう
 納期に追われてる時にそんなん書く余裕なさそう
 記述ルール決めないと意味不明になりそう
 モジュールを可視化できるのはいい
 すでにあるボタンなどを再作成することがなさそう

51. ありがとうございました