Swift のセッションに並んでこちらもフロント寄りのお話ということで、最近 Grunt あんまり活かせていないもやもやが解消するかなと思って こちらのセッション に参加してきました。そしたら時代は今や Gulp ですよという話に…
個人的に響いたこと
- Grunt から今や時代は Gulp に傾きつつある (Google も Gulp を担いだらしい、Yeoman はどうなった？？)
- デザイナーさんがタスクランナー活用して開発する時代
- 古典的アプローチでマルチデバイスのレスポンシブ対応とか無理
- WF だと手戻り多すぎてクリエイターも CI する時代
- フロント開発に node というか npm 必須になりつつあってそれはそれで悩ましい感じ
- 相変わらずフロントのトレンド（やツールが）すぐ変わってこれも辛い
聴講メモ
- 下北沢 オープンソース Cafe では毎週日曜日に小中学生向けにプログラミングを教える道場をやっている
- フロントエンドで普及が進むビルドツール達
- browser-sync : 複数のブラウザ間で同期をとる
- デザイナは各種ブラウザの表示を見てリアルタイムにテストしながら開発ができる
- クリックイベントやページ遷移などすべて同期される
- 変更もリアルタイムに反映される (画像への変更も伝播して icon font を再編集(約 300 msec)して css の再生成(約 50 msec)まで行ってくれる)
- gulp は処理を非同期で並行して行えるので速い
- gulp-watch
- browser-sync : 複数のブラウザ間で同期をとる
- grunt （グラント）
- フロントエンド製作で必要になったあれやこれの自動化をするためのタスクランナー、あるいはビルドツール
- gulp でやるとコード記述量が少なくてすむ
- grunt はコマンド間の連携ができない、一方 gulp はパイプメソッドでシンプルに記述できる
- grunt は非同期実行もできないので時間がかかる
- Web fundamentals by google
- マルチデバイス対応のスターターキット、タスクランナーに gulp を使用
- これから始めるなら gulp で (jQuery などの大御所老舗は grunt 使っている)
- gulp (ガルプ)
- こちらも npm、gulpfile を書く
- 出力先一つ + 監視、出力先複数、変更箇所を見てビルド（gulp-remember というプラグインなど様々なフローを定義できる
- serial_join をするとファイルの読み込み順序を考慮して処理することができる。(node の stream queue を使用)
- どんなタスクがあるか
- LESS/Sass/Stylus などのコンパイル、CSS の最適化（ベンダープレフィックス、ミニファイ、軽量化）
- gulp-uncss は使用されていない箇所を削除してくれる
- CoffeeScript/TypeScript などのコンパイル
- Browserify, RequireJS, UglifyJS
- スタイルガイド(スタイルの仕様書)
- 画像の最適化
- フォントの自動生成
- 楽するため２度と同じ作業をしない（デザイナーの作業現場へのプログラマ文化の導入）
- コンパイル、自動生成
- テスト、ソースコードの検証
- リアルタイム化(LiveReload, BrowserSync)
- 5秒でできると5分でできるは全く別物
- ビルドツールの変遷
- ビルドツールの石器時代
- シェルスクリプト/AppleScript/Adobe JavaScript
- 中世
- Make/Rake/Jake/Fabric/Ant
- Watchman: Facebook 謹製のファイル監視ツールを使うと Make もまだ使える
- 近代
- Guard : ファイルの更新監視
- Watcher: 同じだけど discon
- 現代
- Gulp/Grunt/Brunch/Broccoli
- 平行世界
- CodeKit/Prepros/Hammer/Cactus
- ワークフローが限定的になってしまうのでやや使いづらい
- ビルドツールの石器時代
- サーバサイド vs クライアント
- デザインの現場はコーディング以上に WF だった
- が、レスポンシブになって WF が効かなくなった。手戻り多すぎになってきたのでデザイナ業界も CI やらないといけない。
- PC 上の単純な反復タスクを人がやってはいけない
- 自動化コードのチューニング
- Node.js が共通ツールになってしまった
- フロントエンド開発が盛んになってプログラマが参加して手元の作業環境の自動化が熱くなってきた
