Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Gulp入門 - コーディングを10倍速くする

232.845 visualizaciones

Publicado el

2014/9/12に行われた週末ランサーズでのGulpハンズオンで使用したスライドです。

LIGブログでこの内容をさらにまとめています。
http://liginc.co.jp/web/tutorial/117900

Publicado en: Tecnología
  • Sé el primero en comentar

Gulp入門 - コーディングを10倍速くする

  1. 1. 1 Gulp入門 ~コーディングを10倍速くする
  2. 2. 2 @frontainer Front-end Engineer 林 優一 2014/4 LIG入社 フロントエンドエンジニア 最近はAngularJSの勉強会に顔を出していました ng-mtg#6 - ディレクティブパターン 第1回AngularJS勉強会@LIG 現在はWebサイトを作ったりテンプレート作ったり いろいろと活動しています。 http://github.com/frontainer GruntからGulpに乗り換えたタイプです
  3. 3. 3 今はGrunt使ってますか?
  4. 4. 4 今日はGulpにしましょう
  5. 5. Gulpとは Gruntとの違い 使うことのメリット 5 目次 Let”s hands on カスタマイズ事例 01 02 03 04 05
  6. 6. 6 01 Gulpとは The streaming build system • Node.jsのStreamAPIを利用したビルドシステム • Gruntが抱えているいくつかの問題を解決する手段として登場 • これからはこっちが主流になりそうな予感
  7. 7. 7 02 Gruntとの違い プラグインの数やや少ない多い Github Star 8,398 8,439 開始日2013/6/30 2011/9/18 近い記法NodeっぽいJavaScriptっぽい プラグインタイプNodeプラグインGruntプラグイン
  8. 8. 8 02 Gruntとの違い SASS Auto Prefixer CSS Min SCSS コンパイル CSS出力 コンパイル CSS出力 圧縮完成 SCSS Stream 完成 コンパイルコンパイル圧縮
  9. 9. 9 03 使うことのメリット I like gulp. • Gruntより設定ファイルが記述しやすい • StreamAPIを利用することでGruntより高速でエコ • Gruntと同等のプラグインがほぼ出そろってきている
  10. 10. 10 04 Let”s hands on!! Gulp.jsを使ってコーディング作業を10倍速くしよう 1. Node.jsをインストール 2. Gulp.jsをインストール 3. gulpfile.jsの作成 4. SASSのコンパイル 5. ベンダープレフィックス付与 6. スタイルガイド生成 7. JSの圧縮 8. ファイルの監視と自動化 9. LiveReload環境構築 10.エラー時にwatchを止めない
  11. 11. 11 Node.jsをインストール
  12. 12. 12 Node.js http://nodejs.org
  13. 13. 13 確認コマンドnode -v
  14. 14. 14 Gulp.jsをインストール
  15. 15. 15 package.jsonを作成npm init
  16. 16. 16 Gulpインストールnpm install gulp -g
  17. 17. 17 ローカルGulpインストールnpm install gulp --save-dev
  18. 18. 18 gulpfile.jsの作成
  19. 19. 19 gulpfile.js var gulp = require("gulp");
  20. 20. 20 SASSのコンパイル
  21. 21. 21 sass/style.scss h1 { color: red; &:hover { color: blue; } }
  22. 22. 22 gulp-sass npm install gulp-sass --save-dev
  23. 23. 23 gulpfile.js var gulp = require("gulp"); var sass = require("gulp-sass"); ! gulp.task("sass", function() { gulp.src("sass/**/*scss") .pipe(sass()) .pipe(gulp.dest("./css")); });
  24. 24. 24 var gulp = require("gulp"); var sass = require("gulp-sass"); ! gulp.task("sass", function() { gulp.src("sass/**/*scss") .pipe(sass()) .pipe(gulp.dest("./css")); }); タスクの登録 gulp.task("タスク名",function() {}); 読み出したいファイルのパターンを指定 gulp.src("パターン") srcで取得したファイルに処理実行 .pipe(行いたい処理); 出力先に処理済みのファイルを出力 gulp.dest("出力先")
  25. 25. 25 パターン文字列 "sass/style.scss" sass/style.scssだけヒット ! "sass/*.scss" sassディレクトリ直下にあるscssがヒット ! "sass/**/*.scss" sassディレクトリ以下にあるすべてのscssがヒット ! ["sass/**/*.scss","!sass/sample/**/*.scss] sass/sample以下にあるscssを除くsassディレクトリ以下のscssがヒット ※ gulp-renameを使うと出力ファイルの名前を簡単に変更することができます。
  26. 26. 26 ベンダープレフィックス付与
  27. 27. 27 gulp-autoprefixer npm install gulp-autoprefixer --save-dev
  28. 28. 28 sass/style.scss h1 { color: red; transition: 200ms ease-out transform; &:hover { color: blue; transform: translate(10px,0); } }
  29. 29. 29 gulpfile.js var gulp = require("gulp"); var sass = require(“gulp-sass"); var autoprefixer = require("gulp-autoprefixer"); ! gulp.task("sass", function() { gulp.src("sass/**/*scss") .pipe(sass()) .pipe(autoprefixer()) .pipe(gulp.dest("./css")); });
  30. 30. 30 gulp-frontnote npm install gulp-frontnote --save-dev
  31. 31. 31 gulpfile.js var gulp = require("gulp"); var sass = require(“gulp-sass"); var autoprefixer = require(“gulp-autoprefixer"); var frontnote = require("gulp-frontnote"); ! gulp.task("sass", function() { gulp.src("sass/**/*scss") .pipe(frontnote({ css: '../css/style.css' })) .pipe(sass()) .pipe(autoprefixer()) .pipe(gulp.dest(“./css”)); });
  32. 32. 32 sass/style.scss /* #overview Gulp入門サンプル !サンプルファイルです */ /*#styleguide サンプル見出し1 !サンプルの見出しスタイル hoverすると青くなって10px動く ``` <h1>見出し1</h1> ``` */
  33. 33. 33 JSを圧縮
  34. 34. 34 gulp-uglify npm install gulp-uglify --save-dev
  35. 35. 35 gulpfile.js var gulp = require("gulp"); //..(略 var uglify = require("gulp-uglify"); ! gulp.task("js", function() { gulp.src(["js/**/*.js","!js/min/**/*.js"]) .pipe(uglify()) .pipe(gulp.dest("./js/min")); }); ! // (略
  36. 36. 36 ファイルの監視
  37. 37. 37 gulpfile.js var gulp = require("gulp"); //..(略 ! gulp.task("default", function() { gulp.watch([“js/**/*.js”,"!js/min/**/*.js"],["js"]); gulp.watch(“sass/**/*.scss”,["sass"]); });
  38. 38. 38 LiveReload
  39. 39. 39 gulp-browser-sync npm install browser-sync --save-dev
  40. 40. 40 gulpfile.js var gulp = require("gulp"); //..(略 var browser = require("browser-sync"); ! gulp.task("server", function() { browser({ server: { baseDir: "./", directory: true } }); }); ! // (略
  41. 41. 41 gulpfile.js var gulp = require("gulp"); //..(略 gulp.task("js", function() { gulp.src([“js/**/*.js””,”!js/min/**/*.js"]) .pipe(uglify()) .pipe(gulp.dest(“./js/min")) .pipe(browser.reload({stream:true})) }); ! gulp.task("sass", function() { gulp.src("sass/**/*scss") .pipe(frontnote()) .pipe(sass()) .pipe(autoprefixer()) .pipe(gulp.dest(“./css")) .pipe(browser.reload({stream:true})) }); // (略
  42. 42. 42 gulpfile.js var gulp = require("gulp"); //..(略 gulp.task("default",['server'], function() { gulp.watch(["js/**/*.js","!js/min/**/*.js"],["js"]); gulp.watch("sass/**/*.scss",["sass"]); }); // (略
  43. 43. 43 エラー時にwatchを止めない
  44. 44. 44 gulp-plumber npm install gulp-plumber --save-dev
  45. 45. 45 gulpfile.js var gulp = require("gulp"); //..(略 var plumber = require(“gulp-plumber"); ! gulp.task("js", function() { gulp.src(["js/**/*.js","!js/min/**/*.js"]) .pipe(plumber()) .pipe(uglify()) // (略 ! gulp.task("sass", function() { gulp.src("sass/**/*scss") .pipe(plumber()) .pipe(frontnote()) // (略
  46. 46. HTML/JSのバリデーション(gulp-htmlhint, gulp-jshint) スプライト画像生成(gulp-spritesmith,gulp-sprite-glue) HTMLテンプレート(gulp-ejs,gulp-ect,gulp-jade) 46 その他の便利プラグイン FTP/SFTPアップロード(gulp-sftp,gulp-ftp) 設定ファイル支援(gulp-load-tasks)
  47. 47. 47 05 カスタマイズ事例 frontplate https://github.com/frontainer/frontplate 1. SASS 2. ベンダープレフィックス付与 3. LiveReload 4. スタイルガイド生成 5. EJS(HTMLテンプレート) 6. JSの依存関係解決 & 結合 & 圧縮 (Browserify) 7. 画像の最適化 8. スプライト画像の生成 9. スプライトSCSS出力 10.CSSの最適化 & 圧縮 11.エラーの通知 12.HTML/JSのバリデーション
  48. 48. いつもやる作業は自動化しよう GulpはGruntよりも短く設定を書くことができる オリジナルのgulpfile.jsを作り上げてさらに効率を高めよう! 48 まとめ
  49. 49. 49 ご清聴ありがとうございました

×