1

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

2

@frontainerFront-end Engineer

2014/4 LIG入社 フロントエンドエンジニア

http://github.com/frontainer

現在はWebサイトを作ったりテンプレート作ったり いろいろと活動しています。

最近はAngularJSの勉強会に顔を出していました

林　優一

ng-mtg#6 - ディレクティブパターン

第１回AngularJS勉強会@LIG

GruntからGulpに乗り換えたタイプです

3

今はGrunt使ってますか？

4

今日はGulpにしましょう

Gulpとは

使うことのメリット

Gruntとの違い

5

目次

Let”s hands on

カスタマイズ事例

01

02

03

04

05

6

01 Gulpとは

The streaming build system

• Node.jsのStreamAPIを利用したビルドシステム

• Gruntが抱えているいくつかの問題を解決する手段として登場

• これからはこっちが主流になりそうな予感

7

02 Gruntとの違い

プラグインの数 やや少ない 多い

Github Star 8,398 8,439

開始日 2013/6/30 2011/9/18

近い記法 Nodeっぽい JavaScriptっぽい

プラグインタイプ Nodeプラグイン Gruntプラグイン

8

02 Gruntとの違い

SASS Auto Prefixer

CSS Min

SCSSコンパイル

CSS出力

コンパイル

CSS出力

圧縮 完成

SCSSコンパイル コンパイル 圧縮

完成Stream

9

03 使うことのメリット

I like gulp.

• Gruntより設定ファイルが記述しやすい

• StreamAPIを利用することでGruntより高速でエコ

• Gruntと同等のプラグインがほぼ出そろってきている

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

Node.jsをインストール

12

http://nodejs.orgNode.js

13

確認コマンド node -v

14

Gulp.jsをインストール

15

package.jsonを作成 npm init

16

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

17

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

18

gulpfile.jsの作成

19

gulpfile.js var gulp = require("gulp");

20

SASSのコンパイル

21

sass/style.scss

h1 { color: red; &:hover { color: blue; } }

22

gulp-sass npm install gulp-sass --save-dev

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

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("パターン")

.pipe(行いたい処理);

gulp.dest("出力先")

タスクの登録

読み出したいファイルのパターンを指定

srcで取得したファイルに処理実行

出力先に処理済みのファイルを出力

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

ベンダープレフィックス付与

27

gulp-autoprefixer npm install gulp-autoprefixer --save-dev

28

sass/style.scss

h1 { color: red; transition: 200ms ease-out transform; &:hover { color: blue; transform: translate(10px,0); } }

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

gulp-frontnote npm install gulp-frontnote --save-dev

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

sass/style.scss

/* #overview Gulp入門サンプル !

サンプルファイルです */ /*#styleguide サンプル見出し１ !

サンプルの見出しスタイル hoverすると青くなって10px動く ``` <h1>見出し１</h1>

``` */

33

JSを圧縮

34

gulp-uglify npm install gulp-uglify --save-dev

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

ファイルの監視

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

LiveReload

39

gulp-browser-sync npm install browser-sync --save-dev

40

gulpfile.js

var gulp = require("gulp"); //..(略 var browser = require("browser-sync"); !

gulp.task("server", function() { browser({ server: { baseDir: "./", directory: true } }); }); !

// (略

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

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

エラー時にwatchを止めない

44

gulp-plumber npm install gulp-plumber --save-dev

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()) // (略

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

05 カスタマイズ事例

frontplate

1. SASS 2. ベンダープレフィックス付与

3. LiveReload 4. スタイルガイド生成

5. EJS(HTMLテンプレート)

6. JSの依存関係解決 & 結合 & 圧縮(Browserify)

7. 画像の最適化

8. スプライト画像の生成

9. スプライトSCSS出力

10.CSSの最適化 & 圧縮

11.エラーの通知

12.HTML/JSのバリデーション

https://github.com/frontainer/frontplate

いつもやる作業は自動化しよう

GulpはGruntよりも短く設定を書くことができる

オリジナルのgulpfile.jsを作り上げてさらに効率を高めよう！

48

まとめ

49

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