gulpを使うと彼女ができます - かんたんな紹介とハンズオン
DESCRIPTION
nodejsで動くビルドシステムヘルパー「gulp」の紹介とハンズオンを2014/09/30に社内で行った時のスライドです。TRANSCRIPT
gulpを使うと 彼女ができますかんたんな紹介とハンズオン
おしながき
gulpのかんたんな説明
ゆるいハンズオン
ハンズオンで使ったコードの解説しつつAPIの説明
自己紹介
あさい こうへい UI / UX デザイン部 フロントエンドエンジニア 的なやつ 2014年 5月末 入社 nodeとexpressとangularで呼吸してる !Github : @axross Twitter : @axross_
知ってますか？
Node.jsで動く ビルドシステムヘルパー（タスクランナーみたいなもん） フロントエンド開発での作業を自動化したりする Gruntみたいなやつ 既存のOSSプロジェクトのいくつかはgulpへ移行、 新規のものもgulpの採用例が増えている模様
自動化したいこと
lessやSCSSのコンパイル CSSのベンダープリフィックスの追記や圧縮 CoffeeScriptやTypeScriptのコンパイル Javascriptの依存解決や軽量化・難読化 画像の最適化やbase64化してCSSへ埋め込む スタイルガイドの生成 テスト
Gruntとの違い
よりnode (CommonJS) っぽい書き方 メタファイルがJSとして完結してたり Streamを利用して処理をしたり
メソッドチェインで処理を書いていく タスクランナーとしては抜群に書きやすい
直感的で最低限のAPI 後発なのでまだプラグインの数はGruntに及ばない
diff to
実際にやってみようじゃあ
今回やりたいこと
lessをcssに変換したい
それをminify（短縮化）したものを別に出力したい
これらを自動化したい
今回やりたいこと
lessをcssに変換したい
それをminify（短縮化）したものを別に出力したい
これらを自動化したい
準備
黒い画面を使います !
ディレクトリを作っておく 今後、このディレクトリの中で作業します
$ mkdir gulp_training$ cd gulp_training
準備（2）雑にhtmlを書く index.html
<!DOCTYPE html><html lang="ja"><head> <meta charset="UTF-8"> <link rel="stylesheet" href="./style.min.css"></head><body> <div class="accept">はい</div> <div class="decline">いいえ</div> <div class="later">あとで</div></body>
準備（3）雑にlessを書く style.less
@blue: #03a9f4;@orange: #ff5722;!.button(@color: #607d8b) { display: inline-block; padding: 8px 16px; border-radius: 4px; background: @color; box-shadow: darken(@color, 15%) 0 4px 0; color: #ffffff;}.accept { .button(@blue); }.decline { .button(@orange); }.later { .button(); }
node.jsのインストールインストールされているか確認
$ node -v
インストールしていない人はnodebrewかnvmで入れてください$ curl -L git.io/nodebrew | perl - setup$ export PATH=$HOME/.nodebrew/current/bin:$PATH$ source ~/.bashrc$ nodebrew install-binary stable$ nodebrew use stable
package.jsonを 作っておく利用（依存）するパッケージを記録・共有するために、package.jsonを作成しておく
$ npm init
ウィザードに対して、すべてEnterキー（Yes）でOK
gulpのインストール
CLIで使えるようにグローバルインストール
$ npm install -g gulp
gulpのプラグインの インストール今回はlessのコンパイルをしてみる gulp本体とgulp-lessを入れる
$ npm install --save-dev gulp gulp-less
package.jsonについて
npm installのときに「--save」や「--save-dev」をつけると、package.jsonに記録される このpackage.jsonをgitなどで管理・共有すれば、 コミットしている他のメンバーは「npm install」だけで必要なパッケージをインストールできる 「-g」をつけたものは記録されない
プロジェクトではなく環境にインストールするため
（補足）
gulpfile.jsを作る
「gulpfile.js」という名前のファイルを作ります
$ atom gulpfile.js
普段使ってるエディタがある人は、sublだったりviだったり、 それぞれいい感じにやってください
gulpfile.jsを作るこんな感じに書きます gulpfile.js
var gulp = require('gulp');var less = require('gulp-less');!gulp.task('default', function() { return gulp.src('./style.less') .pipe(less({ paths: ['./'] })) .pipe(gulp.dest('./'));});
gulpfile.jsとは
gulpのタスクと処理を記述する 単体のjsファイルで、Javascriptを書く node.jsで普通に動くので環境変数なんかもイケる RubyのRakeでいうRakefileに近い gulpのrequireを除けば、ファイル単体がモジュールとして完結しているので、依存関係がわかりやすい
（補足）
gulpを動かしてみる
「gulp」コマンドでgulpを動かす
$ gulp
こんな感じになりました？
gulpの結果
$ gulp [13:14:39] Using gulpfile ~/gulp-training/gulpfile.js[13:14:39] Starting 'default'...[13:14:39] Finished 'default' after 42 ms
「style.css」が生成されている
% ls gulpfile.js node_modules/ style.cssindex.html package.json style.less
できたね！！！
lessをcssに変換したい
それをminify（短縮化）したものを別に出力したい
これらを自動化したい
じゃあ次にやりたいこと
lessをcssに変換したい
それをminify（短縮化）したものを別に出力したい
これらを自動化したい
gulpのプラグインの 追加インストールCSSの圧縮と、分けて出すためにリネームをしたい gulp-cssoとgulp-renameを入れる
$ npm install --save-dev gulp-csso gulp-rename
gulpfile.jsに書き足すvar gulp = require('gulp');var less = require('gulp-less');var csso = require('gulp-csso');var rename = require('gulp-rename');!gulp.task('default', function() { return gulp.src('./style.less') .pipe(less({ paths: ['./'] })) .pipe(gulp.dest('./')) .pipe(csso()) .pipe(rename('style.min.css')) .pipe(gulp.dest('./'));});
こんな感じになりました？
gulpの結果
$ gulp [13:32:16] Using gulpfile ~/gulp-training/gulpfile.js[13:32:16] Starting 'default'...[13:32:16] Finished 'default' after 68 ms
style.cssに加え、「style.min.css」が生成されている
% ls gulpfile.js node_modules/ style.css style.min.cssindex.html package.json style.less
できたね！！！！！！！
lessをcssに変換したい
それをminify（短縮化）したものを別に出力したい
これらを自動化したい
最後にやりたいこと
lessをcssに変換したい
それをminify（短縮化）したものを別に出力したい
これらを自動化したい
gulpfile.jsに書き足すvar gulp = require('gulp');var less = require('gulp-less');var csso = require('gulp-csso');var rename = require('gulp-rename');!gulp.task('default', function() { return gulp.src('./style.less') .pipe(less({ paths: ['./'] })) .pipe(gulp.dest('./')) .pipe(csso()) .pipe(rename('style.min.css')) .pipe(gulp.dest('./'));});!gulp.task('watch', function() { return gulp.watch('./*.less', ['default'])});
こんな感じになりました？
gulpの結果
$ gulp watch[13:38:51] Using gulpfile ~/gulp-training/gulpfile.js[13:38:51] Starting 'watch'...[13:38:51] Finished 'watch' after 6.38 ms
style.lessを編集して保存すると、勝手に「default」タスクが走る[13:39:09] Starting 'default'...[13:39:09] Finished 'default' after 62 ms
できたね！！！！！ すごいね！！！lessをcssに変換したい
それをminify（短縮化）したものを別に出力したい
これらを自動化したい
ハンズオンまとめ
gulpをnpmでグローバルインストールする gulpプラグインをnpmでローカルインストールする
この時、--save-devしてpackage.jsonに記録すべき gulpプラグインはrequireして、.pipeに渡す
メソッドチェインで繋げて通せる gulp.watchっていうやつでファイルの監視ができる タスクや処理を書き足すのがすごい楽
APIの説明さっくりと
var gulp = require('gulp');var less = require('gulp-less');var csso = require('gulp-csso');var rename = require('gulp-rename');!gulp.task('default', function() { return gulp.src('./style.less') .pipe(less({ paths: ['./'] })) .pipe(gulp.dest('./')) .pipe(csso()) .pipe(rename('style.min.css')) .pipe(gulp.dest('./'));});!gulp.task('watch', function() { return gulp.watch('./*.less', ['default'])});
タスクの作成
タスクの作成（2）
「gulp タスク名」のように実行するためのタスクを定義する nameは、タスク名をStringで指定する
「default」というタスク名は予約語、「gulp」のみで実行できる depsは、このタスクの前に実行させたいタスク名をArrayで指定できる
複数のタスクを1つのエントリポイントにまとめることができる なくてもよい
fnには、タスクの中身をFunctionとして渡す
gulp.task(name, [deps], fn)
var gulp = require('gulp');var less = require('gulp-less');var csso = require('gulp-csso');var rename = require('gulp-rename');!gulp.task('default', function() { return gulp.src('./style.less') .pipe(less({ paths: ['./'] })) .pipe(gulp.dest('./')) .pipe(csso()) .pipe(rename('style.min.css')) .pipe(gulp.dest('./'));});!gulp.task('watch', function() { return gulp.watch('./*.less', ['default'])});
ファイルの読み込み
ファイルの読み込み（2）
globsは、globとなるStringか、それらが格納されたArrayを指定する 複数渡した場合、以降のpipeはglobsすべてにかかる
optionsでフラグを立てるとbufferとして読み込んだり色々できる あまりやらないと思うので割愛、API参照 もちろんなくてもよい
Streamが返る pipe化したプラグインを通せる
gulp.src(globs [, options])
var gulp = require('gulp');var less = require('gulp-less');var csso = require('gulp-csso');var rename = require('gulp-rename');!gulp.task('default', function() { return gulp.src('./style.less') .pipe(less({ paths: ['./'] })) .pipe(gulp.dest('./')) .pipe(csso()) .pipe(rename('style.min.css')) .pipe(gulp.dest('./'));});!gulp.task('watch', function() { return gulp.watch('./*.less', ['default'])});
pipeを通す
pipeを通す（2）
gulp.srcで返ったStreamには、pipe化されたgulpのプラグインを通すことができる
さっきの例だと、gulp-lessやgulp-renameなどがそれにあたる pipeはそのまま継続してStreamを返すので、メソッドチェインして次々にpipeを通すことができる
gulp.src(...).pipe(pipedGulpPlugin)
var gulp = require('gulp');var less = require('gulp-less');var csso = require('gulp-csso');var rename = require('gulp-rename');!gulp.task('default', function() { return gulp.src('./style.less') .pipe(less({ paths: ['./'] })) .pipe(gulp.dest('./')) .pipe(csso()) .pipe(rename('style.min.css')) .pipe(gulp.dest('./'));});!gulp.task('watch', function() { return gulp.watch('./*.less', ['default'])});
ファイルの書き出し
ファイルの書き出し（2）
指定したpathにファイルを書き出す pathで指定できるのはディレクトリ名まで リネームしたい場合はgulp-renameをpipeで通す ディレクトリが存在しない場合は自動的に作られる
optionsでファイルのパーミッション指定したりできる gulp.dest自体がpipeで通せる
gulp.dest(path [, options])
var gulp = require('gulp');var less = require('gulp-less');var csso = require('gulp-csso');var rename = require('gulp-rename');!gulp.task('default', function() { return gulp.src('./style.less') .pipe(less({ paths: ['./'] })) .pipe(gulp.dest('./')) .pipe(csso()) .pipe(rename('style.min.css')) .pipe(gulp.dest('./'));});!gulp.task('watch', function() { return gulp.watch('./*.less', ['default'])});
ファイルの監視
ファイルの監視（2）
globにStringで指定されたファイルを監視する tasksにはgulp.taskで定義しているタスク名をArrayで指定する Gruntと同じように内部でgazeというパッケージを使っていて、 optionsのそのへんのAPIは同じ 第三引数（tasks）にArrayじゃなくてFunctionを渡すと、 cb的な感じにゴニョゴニョすることもできる
gulp.watch(glob [, options], tasks)
こんだけですdocsにもこれしか載ってない
API まとめ
gulp.taskでタスクを定義する これの前にこのタスクやってね、みたいなのカンタン
gulp.srcでファイルを読み込む gulp.srcしたものにpipeして、処理を通していく 出力するときはgulp.dest
gulp.dest自体もpipeに通すので、minifyする時とか楽
Q&A何かありますか？
他にも学び方とか pluginの探し方とか公式ドキュメント https://github.com/gulpjs/gulp/blob/master/docs/README.md !gulp.js その4 プラグイン一覧 http://qiita.com/oreo3@github/items/0f037e7409be02336cb9 !npmとかGitHubを定期的にwatchするとよい ドキュメントにrecipesがあるので、参考にするとよい
ご清聴ありがとう ございました