Gulp入門 - コーディングを10倍速くする
159 likes•244,872 views
2014/9/12に行われた週末ランサーズでのGulpハンズオンで使用したスライドです。 LIGブログでこの内容をさらにまとめています。 http://liginc.co.jp/web/tutorial/117900
![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を使うと出力ファイルの名前を簡単に変更することができます。](https://image.slidesharecdn.com/gulp-140912171336-phpapp01/85/Gulp-10-25-320.jpg)
![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"));
});
!
// (略](https://image.slidesharecdn.com/gulp-140912171336-phpapp01/85/Gulp-10-35-320.jpg)
![37
gulpfile.js
var gulp = require("gulp");
//..(略
!
gulp.task("default", function() {
gulp.watch([“js/**/*.js”,"!js/min/**/*.js"],["js"]);
gulp.watch(“sass/**/*.scss”,["sass"]);
});](https://image.slidesharecdn.com/gulp-140912171336-phpapp01/85/Gulp-10-37-320.jpg)
![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}))
});
// (略](https://image.slidesharecdn.com/gulp-140912171336-phpapp01/85/Gulp-10-41-320.jpg)
![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"]);
});
// (略](https://image.slidesharecdn.com/gulp-140912171336-phpapp01/85/Gulp-10-42-320.jpg)
![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())
// (略](https://image.slidesharecdn.com/gulp-140912171336-phpapp01/85/Gulp-10-45-320.jpg)
Gulp入門 - コーディングを10倍速くする
- 2. 2 @frontainer Front-end Engineer 林 優一 2014/4 LIG入社 フロントエンドエンジニア 最近はAngularJSの勉強会に顔を出していました ng-mtg#6 - ディレクティブパターン 第１回AngularJS勉強会@LIG 現在はWebサイトを作ったりテンプレート作ったり いろいろと活動しています。 http://github.com/frontainer GruntからGulpに乗り換えたタイプです
- 5. Gulpとは Gruntとの違い 使うことのメリット 5 目次 Let”s hands on カスタマイズ事例 01 02 03 04 05
- 6. 6 01 Gulpとは The streaming build system • Node.jsのStreamAPIを利用したビルドシステム • Gruntが抱えているいくつかの問題を解決する手段として登場 • これからはこっちが主流になりそうな予感
- 7. 7 02 Gruntとの違い プラグインの数やや少ない多い Github Star 8,398 8,439 開始日2013/6/30 2011/9/18 近い記法NodeっぽいJavaScriptっぽい プラグインタイプNodeプラグインGruntプラグイン
- 8. 8 02 Gruntとの違い SASS Auto Prefixer CSS Min SCSS コンパイル CSS出力 コンパイル CSS出力 圧縮完成 SCSS Stream 完成 コンパイルコンパイル圧縮
- 9. 9 03 使うことのメリット I like gulp. • Gruntより設定ファイルが記述しやすい • StreamAPIを利用することでGruntより高速でエコ • Gruntと同等のプラグインがほぼ出そろってきている
- 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を止めない
- 13. 13 確認コマンドnode -v
- 16. 16 Gulpインストールnpm install gulp -g
- 17. 17 ローカルGulpインストールnpm install gulp --save-dev
- 19. 19 gulpfile.js var gulp = require("gulp");
- 20. 20 SASSのコンパイル
- 21. 21 sass/style.scss h1 { color: red; &:hover { color: blue; } }
- 22. 22 gulp-sass npm install gulp-sass --save-dev
- 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 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 パターン文字列 "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 ベンダープレフィックス付与
- 27. 27 gulp-autoprefixer npm install gulp-autoprefixer --save-dev
- 28. 28 sass/style.scss h1 { color: red; transition: 200ms ease-out transform; &:hover { color: blue; transform: translate(10px,0); } }
- 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 gulp-frontnote npm install gulp-frontnote --save-dev
- 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 sass/style.scss /* #overview Gulp入門サンプル !サンプルファイルです */ /*#styleguide サンプル見出し１ !サンプルの見出しスタイル hoverすると青くなって10px動く ``` <h1>見出し１</h1> ``` */
- 33. 33 JSを圧縮
- 34. 34 gulp-uglify npm install gulp-uglify --save-dev
- 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 ファイルの監視
- 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 LiveReload
- 39. 39 gulp-browser-sync npm install browser-sync --save-dev
- 40. 40 gulpfile.js var gulp = require("gulp"); //..(略 var browser = require("browser-sync"); ! gulp.task("server", function() { browser({ server: { baseDir: "./", directory: true } }); }); ! // (略
- 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 gulpfile.js var gulp = require("gulp"); //..(略 gulp.task("default",['server'], function() { gulp.watch(["js/**/*.js","!js/min/**/*.js"],["js"]); gulp.watch("sass/**/*.scss",["sass"]); }); // (略
- 44. 44 gulp-plumber npm install gulp-plumber --save-dev
- 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. 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 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のバリデーション