2014/9/12に行われた週末ランサーズでのGulpハンズオンで使用したスライドです。 LIGブログでこの内容をさらにまとめています。 http://liginc.co.jp/web/tutorial/117900

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

2. 2
@frontainer
Front-end Engineer
林 優一
2014/4 LIG入社
フロントエンドエンジニア
最近はAngularJSの勉強会に顔を出していました
ng-mtg#6 - ディレクティブパターン
第１回AngularJS勉強会@LIG
現在はWebサイトを作ったりテンプレート作ったり
いろいろと活動しています。
http://github.com/frontainer
GruntからGulpに乗り換えたタイプです

3. 3
今はGrunt使ってますか？

4. 4
今日は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を止めない

11. 11
Node.jsをインストール

12. 12
Node.js http://nodejs.org

13. 13
確認コマンドnode -v

14. 14
Gulp.jsをインストール

15. 15
package.jsonを作成npm init

16. 16
Gulpインストールnpm install gulp -g

17. 17
ローカルGulpインストールnpm install gulp --save-dev

18. 18
gulpfile.jsの作成

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"]);
});
// (略

43. 43
エラー時にwatchを止めない

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のバリデーション

48. いつもやる作業は自動化しよう
GulpはGruntよりも短く設定を書くことができる
オリジナルのgulpfile.jsを作り上げてさらに効率を高めよう！
48
まとめ

49. 49
ご清聴ありがとうございました