Gulp勉強会@IVP
Gulpとは
gulpはNode.jsをベースとしたビルドシステムヘルパーです
切り口変えよう
gulpでできること
フロントエンドにまつわる作業を
まとめて自動化できる
 Sass,Compassなどのコンパイル
 HTMLからmarkdown,プレーンテキストに変換
 CSS中に点在したメディアクエリーをまとめる
 CSSベンダープリフィックスの管理
 CSSプロパティ並び順整理
 コードの連結
 コードの圧縮
 コードの整形
 CSSスプライト生成
 画像圧縮
 markdownをPDFに変換
 Webページのスクリーンショット撮影
 画像サイズ変換
 コード構文チェック Lint
 ファイル書き出し
 圧縮/解凍
 FTPアップロード
 文字コード変換
 実体参照変換
 JSON,YAML,XML,PLIST,CSV の相互変換
 HTMLテーブルをCSVに変換
 サイトマップ作成
 sitemap.xml生成
 通知センターに通知
これらの作業をまとめて自動化できる!
gulpで自動化できること(一部)
gulpを使う前に
Gulpとは
gulpはNode.jsをベースとしたビルドシステムヘルパーです
Node.jsとは
サーバー側で動作する
Javascriptアプリケーションプラットホーム
Node.jsとは(間違いがち)
 プログラミング言語ではない
 サーバーソフトではない
 プログラミング言語のフレームワークではない
※ IISやapacheとは違うが、同じ役割をすることはできる
Node.jsとは(できること)
 Javascriptで動く
 Windowsでも動く
 サーバーで動く
 ファイルの読み書きもjavascriptでできちゃう
 DBとの連携もjavascriptでできちゃう
Node.jsとは(技術的特徴)
 非同期 (I/Oの処理結果を待たず処理を進める)
 シングルスレッド (メモリ消費が少ないので速い)
 C/C++プラグインで拡張可能
 イベントドリブン
 ノンブロッキングI/O(コールバック関数処理)
Node.jsとは(技術的特徴)
 非同期 (I/Oの処理結果を待たず処理を進める)
 シングルスレッド (メモリ消費が少ないので速い)
 C/C++プラグインで拡張可能
 イベントドリブン
 ノンブロッキングI/O(コールバック関数処理)
npmについて
 node.jsのモジュール管理システム
 install/uninstallをすべてnpmで行う
 各モジュールの依存関係を管理してくれる
 自分で開発したモジュールも公開できる
 インストールにはlocalとglobalの2つがある
そういえば
今日の勉強会の名前、
「タスクランナーgulp」
って言ってなかったっけ?
ビルドシステムヘルパー
じゃなくない?
ミスです
タスクランナーとは
様々なタスクを自動的に実行し、
作業を効率化するツール
それ同じじゃん
タスクランナーといえば
Gruntについて
 フロントエンドのタスクを自動化するツール
 プラグインが多数あり、組み合わせることで自動化
 gulpより古い
 処理の1つの単位を「タスク」と呼ぶため「タスク
ランナー」と呼ばれる
Gruntとgulpの違い
Grunt gulp
 単一のプラグインを組み合わせる
 JSONでタスク定義を書く
 学習コストが高い
 プラグインを組み合わせてタスクを作る
 javascriptで処理をつないでいく
 学習コストが低い
Gruntとgulpの違い
Grunt gulp
 単一のプラグインを組み合わせる
 JSONでタスク定義を書く
 学習コストが高い
 プラグインを組み合わせてタスクを作る
 javascriptで処理をつないでいく
 学習コストが低い
→オブジェクト指向っぽい →スクリプト言語っぽい
記述方法の比較
gulpの始め方(事前準備)
事前準備(node.jsインストール)
Windowsはインストーラを実行するだけ
node.jsとnpmの確認
事前準備(gulpインストール)
//global install
> npm install gulp -g
//local install
//local installは対象のディレクトリで行う
> npm install --save-dev gulp
gulpの始め方(タスク作成)
gulpfile.jsの作成
var gulp = require('gulp');
gulp.task('hello', function() {
console.log('Hello gulp!');
});
gulp.task('default', ['hello']);
デモ
実践その1
作成プログラム概要
1)cssフォルダ内にある拡張子がCSSのファイルを全て結合
2)1で結合したファイルをall.cssという名前で保存
3)all.cssをminify(圧縮)する
4)3で作成したファイルをall.min.cssという名前で保存
5)4で作成したファイルを出力
使用プラグイン
 gulp-concat
 gulp-minify-css
 gulp-rename
npm install --save-dev
使用プラグインのインストール
npm install –save –dev gulp-concat
npm install –save –dev gulp-minify-css
npm install –save –dev gulp-rename
npm install --save-dev
デモ
作成プログラムに処理追加
1)cssフォルダ内にある拡張子がCSSのファイルを全て結合
2)1で結合したファイルをall.cssという名前で保存
3)all.cssをminify(圧縮)する
4)3で作成したファイルをall.min.cssという名前で保存
5)4で作成したファイルを出力
→上記の処理をファイルの更新があった場合に自動的に実行させる
デモ
実践その2
作成プログラムに処理追加
1)cssフォルダ内にある拡張子がCSSのファイルを全て結合
2)1で結合したファイルをall.cssという名前で保存
3)all.cssをminify(圧縮)する
4)3で作成したファイルをall.min.cssという名前で保存
5)4で作成したファイルを出力
→1~2と3~5を別のタスクとして記述する
ここで問題
Node.jsの問題
node.jsの処理は非同期で実行される
Node.jsの問題
処理1
処理3
処理2
並行処理される
=どれが最初に終わるか分からない
問題の解決
run-sequenceというプラグインを使う
問題の解決
npm install --save-dev run-sequence
処理実行順を管理できるプラグインを使う
※gulp4.0では実行順序を指定できるAPIが提供される
デモ
様々なプラグイン
http://gulpjs.com/plugins/
gulp pluginページ
 Sass,Compassなどのコンパイル
 HTMLからmarkdown,プレーンテキストに変換
 CSS中に点在したメディアクエリーをまとめる
 CSSベンダープリフィックスの管理
 CSSプロパティ並び順整理
 コードの連結
 コードの圧縮
 コードの整形
 CSSスプライト生成
 画像圧縮
 markdownをPDFに変換
 Webページのスクリーンショット撮影
 画像サイズ変換
 コード構文チェック Lint
 ファイル書き出し
 圧縮/解凍
 FTPアップロード
 文字コード変換
 実体参照変換
 JSON,YAML,XML,PLIST,CSV の相互変換
 HTMLテーブルをCSVに変換
 サイトマップ作成
 sitemap.xml生成
 通知センターに通知
これらの作業をまとめて自動化できる!
gulpで自動化できること(一部)
おまけ
StyleDoccoについて
 Node.jsで作られてるスタイルガイドジェネレーター
 CSSにMarkDown(Qiitaで使ってる奴)で書いたらHTML出力される
 gulpのプラグインで自動的に生成させたりできるらしい
 SassとかLessと組み合わせて使うといいかもね
StyleDoccoについての感想
 CSSファイルが肥大化しそう
 納期に追われてる時にそんなん書く余裕なさそう
 記述ルール決めないと意味不明になりそう
 モジュールを可視化できるのはいい
 すでにあるボタンなどを再作成することがなさそう
ありがとうございました

gulp勉強会@IVP