gulp-sketch

gulp-sketchは、gulpからSketchToolを使えるようにするプラグインです。

※このドキュメントは、gulp-sketchのREADME.mdの日本語版です。

インストール

SketchToolをダウンロードして、インストールします。めんどうな場合は、次のコマンドをどうぞ。

$ curl -L https://raw.githubusercontent.com/cognitom/dotfiles/master/lib/sketchtool.sh | sudo sh

そのあと、gulp-sketchをnpmからインストールします。

$ npm install gulp-sketch --save-dev

使い方

var gulp = require("gulp");
var sketch = require("gulp-sketch");

gulp.task('sketch', function(){
  return gulp.src("./src/sketch/*.sketch")
    .pipe(sketch({
      export: 'slices',
      formats: 'png'
    }))
    .pipe(gulp.dest("./dist/images/"));
});

またはCoffeeScriptで、次のように書けます。

gulp = require 'gulp'
sketch = require 'gulp-sketch'

gulp.task 'sketch', ->
  gulp.src './src/sketch/*.sketch'
  .pipe sketch
    export: 'slices'
    formats: 'png'
  .pipe gulp.dest './dist/images/'

オプション

基本的には、SketchToolがサポートするオプションがそのまま使えます。

• export: pages,artboards,slices
• formats: png,jpg,pdf,eps,svg
• scales: 1.0,2.0
• items: エクスポートするアートボードやスライスの名前を指定。指定のない場合は、すべてのアートボードとスライスが出力対象です。
• bounds:
• saveForWeb: Web用に最適化する(YES) / しない(NO)
• compact: Compact形式にする(YES) / しない(NO) ※SVG出力でのみ有効.
• trimmed: Export images trimmed. (optional, defaults to NO).

上記のSketchToolのオプションに加えて、SVGを出力する場合はcleanオプションが使えます。

• clean: SVGファイルから、Sketchのネームスペース情報などを取り除く(YES) / 取り除かない(NO) ※詳しくは、clean-sketch参照

レイヤーの名前付け

レイヤー名が、そのままエクスポートするファイルの名前になります。スラッシュを使うとサブディレクトリに出力できます。[公式ドキュメント](their article)

• レイヤー名yellowで、{ format:'png' }オプションで出力 → yellow.png
• レイヤー名square/yellowで、同オプションで出力 → squareディレクトリ内にyellow.png

質問・フィードバック

GitHubのIssueへどうぞ。日本語でOKです。プルリクエストも歓迎です。

• https://github.com/cognitom/gulp-sketch/issues