Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

gulp勉強会@IVP

2,296 views

Published on

gulp勉強会

Published in: Technology
  • Be the first to comment

gulp勉強会@IVP

  1. 1. Gulp勉強会@IVP
  2. 2. Gulpとは gulpはNode.jsをベースとしたビルドシステムヘルパーです
  3. 3. 切り口変えよう
  4. 4. gulpでできること フロントエンドにまつわる作業を まとめて自動化できる
  5. 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. 6. gulpを使う前に
  7. 7. Gulpとは gulpはNode.jsをベースとしたビルドシステムヘルパーです
  8. 8. Node.jsとは サーバー側で動作する Javascriptアプリケーションプラットホーム
  9. 9. Node.jsとは(間違いがち)  プログラミング言語ではない  サーバーソフトではない  プログラミング言語のフレームワークではない ※ IISやapacheとは違うが、同じ役割をすることはできる
  10. 10. Node.jsとは(できること)  Javascriptで動く  Windowsでも動く  サーバーで動く  ファイルの読み書きもjavascriptでできちゃう  DBとの連携もjavascriptでできちゃう
  11. 11. Node.jsとは(技術的特徴)  非同期 (I/Oの処理結果を待たず処理を進める)  シングルスレッド (メモリ消費が少ないので速い)  C/C++プラグインで拡張可能  イベントドリブン  ノンブロッキングI/O(コールバック関数処理)
  12. 12. Node.jsとは(技術的特徴)  非同期 (I/Oの処理結果を待たず処理を進める)  シングルスレッド (メモリ消費が少ないので速い)  C/C++プラグインで拡張可能  イベントドリブン  ノンブロッキングI/O(コールバック関数処理)
  13. 13. npmについて  node.jsのモジュール管理システム  install/uninstallをすべてnpmで行う  各モジュールの依存関係を管理してくれる  自分で開発したモジュールも公開できる  インストールにはlocalとglobalの2つがある
  14. 14. そういえば
  15. 15. 今日の勉強会の名前、 「タスクランナーgulp」 って言ってなかったっけ? ビルドシステムヘルパー じゃなくない?
  16. 16. ミスです
  17. 17. タスクランナーとは 様々なタスクを自動的に実行し、 作業を効率化するツール
  18. 18. それ同じじゃん
  19. 19. タスクランナーといえば
  20. 20. Gruntについて  フロントエンドのタスクを自動化するツール  プラグインが多数あり、組み合わせることで自動化  gulpより古い  処理の1つの単位を「タスク」と呼ぶため「タスク ランナー」と呼ばれる
  21. 21. Gruntとgulpの違い Grunt gulp  単一のプラグインを組み合わせる  JSONでタスク定義を書く  学習コストが高い  プラグインを組み合わせてタスクを作る  javascriptで処理をつないでいく  学習コストが低い
  22. 22. Gruntとgulpの違い Grunt gulp  単一のプラグインを組み合わせる  JSONでタスク定義を書く  学習コストが高い  プラグインを組み合わせてタスクを作る  javascriptで処理をつないでいく  学習コストが低い →オブジェクト指向っぽい →スクリプト言語っぽい
  23. 23. 記述方法の比較
  24. 24. gulpの始め方(事前準備)
  25. 25. 事前準備(node.jsインストール) Windowsはインストーラを実行するだけ
  26. 26. node.jsとnpmの確認
  27. 27. 事前準備(gulpインストール) //global install > npm install gulp -g //local install //local installは対象のディレクトリで行う > npm install --save-dev gulp
  28. 28. gulpの始め方(タスク作成)
  29. 29. gulpfile.jsの作成 var gulp = require('gulp'); gulp.task('hello', function() { console.log('Hello gulp!'); }); gulp.task('default', ['hello']);
  30. 30. デモ
  31. 31. 実践その1
  32. 32. 作成プログラム概要 1)cssフォルダ内にある拡張子がCSSのファイルを全て結合 2)1で結合したファイルをall.cssという名前で保存 3)all.cssをminify(圧縮)する 4)3で作成したファイルをall.min.cssという名前で保存 5)4で作成したファイルを出力
  33. 33. 使用プラグイン  gulp-concat  gulp-minify-css  gulp-rename npm install --save-dev
  34. 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. 35. デモ
  36. 36. 作成プログラムに処理追加 1)cssフォルダ内にある拡張子がCSSのファイルを全て結合 2)1で結合したファイルをall.cssという名前で保存 3)all.cssをminify(圧縮)する 4)3で作成したファイルをall.min.cssという名前で保存 5)4で作成したファイルを出力 →上記の処理をファイルの更新があった場合に自動的に実行させる
  37. 37. デモ
  38. 38. 実践その2
  39. 39. 作成プログラムに処理追加 1)cssフォルダ内にある拡張子がCSSのファイルを全て結合 2)1で結合したファイルをall.cssという名前で保存 3)all.cssをminify(圧縮)する 4)3で作成したファイルをall.min.cssという名前で保存 5)4で作成したファイルを出力 →1~2と3~5を別のタスクとして記述する
  40. 40. ここで問題
  41. 41. Node.jsの問題 node.jsの処理は非同期で実行される
  42. 42. Node.jsの問題 処理1 処理3 処理2 並行処理される =どれが最初に終わるか分からない
  43. 43. 問題の解決 run-sequenceというプラグインを使う
  44. 44. 問題の解決 npm install --save-dev run-sequence 処理実行順を管理できるプラグインを使う ※gulp4.0では実行順序を指定できるAPIが提供される
  45. 45. デモ
  46. 46. 様々なプラグイン http://gulpjs.com/plugins/ gulp pluginページ
  47. 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. 48. おまけ
  49. 49. StyleDoccoについて  Node.jsで作られてるスタイルガイドジェネレーター  CSSにMarkDown(Qiitaで使ってる奴)で書いたらHTML出力される  gulpのプラグインで自動的に生成させたりできるらしい  SassとかLessと組み合わせて使うといいかもね
  50. 50. StyleDoccoについての感想  CSSファイルが肥大化しそう  納期に追われてる時にそんなん書く余裕なさそう  記述ルール決めないと意味不明になりそう  モジュールを可視化できるのはいい  すでにあるボタンなどを再作成することがなさそう
  51. 51. ありがとうございました

×