村田

Gulpで楽しよう！

Gulpってなに？

Node.jsをベースとしたビルドシステムヘルパー

です

？

様々な作業を自動化できる

便利なツールです

どうやって使うの？

豊富なプラグインを組み合わせてお好みのタスクを作成

gulp-add-srcgulp-angular-filesort

gulp-angular-templatecachegulp-autoprefixer

gulp-beautifygulp-bumpgulp-cache

gulp-changedgulp-coffeegulp-csslintgulp-data

gulp-debuggulp-eslint

gulp-execgulp-filtergulp-git

gulp-headergulp-iconfontgulp-ignore

gulp-istanbulgulp-jasmine

gulp-jsdocgulp-jshint

gulp-markdowngulp-minify-html

gulp-mocha

gulp-nodemongulp-notify

gulp-plumbergulp-replace

gulp-sassgulp-sequencegulp-streamifygulp-template

gulp-watchgulp-zip

gulp-json-editorgulp-docco

gulp-conflict ,etc..

もっと具体的に

できることたくさんあります

SCSSを CSSにビルドする

markdownをPDFに変換

SCSSのスタイルガイドを作成する

特定のファイルを結合する

ファイルの変更を

監視する

ソースコードを圧縮する

JavaScriptのドキュメントを作成する

画像を圧縮する

フォルダ構成ってどうなってんの？

gulpfile.js

node_modules

package.json

[root directory]gulp

gulp-jsdocgulp-template

gulp-sassgulp-plumbergulp-minify-css

フォルダ構成ってどうなってんの？

gulpfile.js

node_modules

package.json

[root directory]gulp

gulp-jsdocgulp-template

gulp-sassgulp-plumbergulp-minify-css

各種プラグインを格納

フォルダ構成ってどうなってんの？

gulpfile.js

node_modules

package.json

[root directory]gulp

gulp-jsdocgulp-template

gulp-sassgulp-plumbergulp-minify-css

インストール対象設定 JSON（後で活躍します）

フォルダ構成ってどうなってんの？

gulpfile.js

node_modules

package.json

[root directory]gulp

gulp-jsdocgulp-template

gulp-sassgulp-plumbergulp-minify-css

ここにタスクを記述します

gulpfile.jsはこんな感じで書きます

ストリーム形式で記述できる

プラグインの組み合わせも自由

自在

こいつらがおすすめです

×SCSSを CSSにビルドする

gulp-sass

ファイルの変更を

監視するgulp

JavaScriptのドキュメントを作成する

gulp-jsdoc

×SCSSを CSSにビルドする

gulp-sass

ファイルの変更を

監視するgulp

さてスタイル書こうっと

JavaScriptのドキュメントを作成する

gulp-jsdoc

コメントコメント♪

JavaScriptのドキュメントを作成する

gulp-jsdoc

JavaScriptのドキュメントを作成する

gulp-jsdoc

大規模開発でも活躍します

gulpfile.js

node_modules

package.json

[root directory]gulp

gulp-jsdocgulp-template

gulp-sassgulp-plumbergulp-minify-css

インストール対象設定 JSON（後で活躍します）

今です

インストールするプラグインを統一できる

1回作れば後は展開するだ

け

バージョンまで指定できる

コマンド 1個で簡単インストー

ル

つかってみてください

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