Linkage of gulp & sketch

1

Linkage of Gulp & Sketch

2

Rootage.ink

Goro Ide

Web Designer

3

Agenda

GulpSketchLinkage


1. Gulp

4Linkage of Gulp & Sketch

5

about Gulp1.GulpNode.jsのstreamAPIを利用したビルドシステム。

ファイルの圧縮、結合、コンパイル処理等を自動化できます。


6

Gulp & Grunt

競合はGruntというタスクランナー。

どちらも、プラグインを使い、成果物を求める一連タスクを実行します。


1.Gulp


1.Gulp

タスクランナー

9,806star

2011/9/18

プラグイン多い

ビルドシステム

15,271star

2013/6/30

プラグイン少ない

Gulp & Grunt

2.Sketch


9

about Sketch2.SketchBOHEMIAN CODING製の

デザイン・グラフィックドローイングツール。

made in LONDON


10

about Sketch

Photoshop,Fireworks & Illustratorのハイブリッド。

マルチデバイスのデザインに特化している。

が、歴史が浅く、脱Adobeとまでは至らない(2015現在)


2.Sketch

11

about Sketch

安価

軽い

秀逸

全て英語

情報が少ない

Windows不可

Merit Demerit


2.Sketch

4. Linkage

12

x


13

Todo


3.Linkage

Sketchで作成したデータから

画像を書き出す！

書き出した画像を

任意の場所に配置！

やりたいことは？

画像サイズダウン！

14

http://yeoman.io/

Yeoman


3.LinkageまずYeomanでテンプレートを作ります。

http://yeoman.io/

15

Template building

// npmを最新にする $ sudo npm update -g npm

// インストール $ sudo npm install -g yo

// generat $ yo -v

// 変更を監視 $ gulp watch


3.Linkage前提として

node.jsインストール済み

16

sketchTool

// sketchToolのインストール $ curl -L https://raw.githubusercontent.com/cognitom/dotfiles/master/lib/sketchtool.sh | sudo sh


3.LinkageSketchのコマンドラインツール

17

Sketch setting

SketchデータをGulpで書き出すための

プラグインを導入します。

// gulpからSketchToolを使えるようにする $ sudo npm install gulp-sketch --save-dev

// 書き出し画像の軽量化 $ sudo npm install gulp-imagemin --save-dev

// Stream上で処理されているファイルを把握する $ sudo npm install gulp-filelog --save-dev


3.Linkage

18

Run

実行

$ gulp sketch


3.Linkage

19

フロントエンド開発で実用しているgulpから

Sketchを操作出来るなんて激アツです。

フロントエンド業とデザイナー業の境界が

日増しに融解していくのを感じます…


3.Linkage Summary

20

Reference

Gulp

https://app.codegrid.net/entry/gulp-1

http://qiita.com/hosomichi/items/428479aba3aebeb82c42

Sketch

http://whiskers.nukos.kitchen/2014/12/19/gulp-sketch.html

http://qiita.com/cognitom/items/6254340f031b9309e533


3.Linkage

http://qiita.com/cognitom/items/6254340f031b9309e533

21

END


3.Linkage

Linkage of gulp & sketch

Technology

Transcript of Linkage of gulp & sketch