gulp-sketchでSketchのスライスを楽にする環境を構築する

satake

7年 ago

Sketchのスライスめんどくさいなあって思いませんか？Photoshopの画像アセット機能はフォルダ名に.pngとか拡張子をつけるだけでリアルタイムに画像をスライスしてくれるし、Sketchでもリアルタイムにザクザク吐き出してほしい。そんな機能を実現させてくれるのがありました。gulp-sketchです。

本記事のサンプルは下記に格納されています。
https://github.com/tipsnote/gulp-sketch

gulp-sketch

Sketchをコマンドラインで扱える機能をもったnpmパッケージです。
https://github.com/cognitom/gulp-sketch

Sketchでスライスを設定したものをexportさせるコードを例にして見てみます。

//ディレクトリー構成
├── assets/images //exportされた画像が格納されます。
├── sketch
     ├── sample.sketch

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

gulp.task("sketch", () => {
  return gulp.src("./sketch/**/*.sketch")
    .pipe(sketch({
      export: "slices"
    }))
    .pipe(gulp.dest("./assets/images/"))
});

$ gulp sketch

これでsample.sketchでスライス設定をしているものはassets/imagesの中に出力できます。

オプションは公式サイトでご確認していただければと思います。

SketchTool

もともとSketchにはオフィシャルでSketchToolという、Sketchをコマンドラインで扱えるようにするものが用意されているのですが、gulp-sketchはそれをgulpで使えるようにしたものです。

SketchTool
https://www.sketchapp.com/tool/

Sketch本体と一緒にダウンロードされているのですが、下記コマンドを打ってインストールします。

//インストール
$ /Applications/Sketch.app/Contents/Resources/sketchtool/install.sh

下記のようにコマンドを打つとスライスの設定がされたものがexportされます。

//スライス設定されたものを出力
$ sketchtool export slices sketch/sample.sketch --output=assets/images

自動でスライスさせる

gulp-sketchの話に戻ります。gulpでwatch機能を使って、Sketchファイルを監視させましょう。watch発動後、Sketchデータを変更したら自動でassets/imagesの中に画像が入っていきます。

gulp.task("watch",() => {
    gulp.watch("./sketch/**/*.sketch", ["sketch"]);
});

$ gulp watch

出力後、圧縮させる場合

Sketchのオフィシャルプラグインで、画像をexportさせるときに圧縮させた状態で出力させるSVGO CompressorとBitmap Compressorがあるのですが、これがコマンドで出力させると効きません。圧縮させたい場合はgulp-imageminなどを使って、出力させたあとに圧縮させる必要があります。

const gulp = require("gulp");
const sketch = require("gulp-sketch");
const imagemin = require('gulp-imagemin');

gulp.task('sketch:min',() => {
  return gulp.src("./sketch/**/*.sketch")
    .pipe(sketch({
      export: "slices"
    }))
    .pipe(imagemin())
    .pipe(gulp.dest("./assets/images/"))
});

$ gulp sketch:min

※gulp-imageminですが、imagemin-svgoというnpmパッケージもインストールしないとエラーで動きませんでしたので、そちらもpackage.jsonに追加しています。

最終コード

圧縮すると少し遅くなるので、コーディングを始めたばかりのときなど、とりあえず圧縮せずにガンガン組みたいときに圧縮をOFFにするフラグを追加しています。

const gulp = require("gulp");
const sketch = require("gulp-sketch");
const imagemin = require('gulp-imagemin');

const paths = {
  srcDir : "./sketch/**/*.sketch",
  dstDir : "./assets/images/"
}

const sketchOptions = {
  export: "slices"
}

const minifyOptions = {
  "images":false
}

gulp.task("sketch", () => {
  return gulp.src(paths.srcDir)
    .pipe(sketch(sketchOptions))
    .pipe(gulp.dest(paths.dstDir))
});

gulp.task('sketch:min',() => {
  return gulp.src(paths.srcDir)
    .pipe(sketch(sketchOptions))
    .pipe(imagemin())
    .pipe(gulp.dest(paths.dstDir))
});

gulp.task("watch",() => {
    gulp.watch(paths.srcDir, [minifyOptions.images? "sketch:min" : "sketch"]);
});

まとめ

いかがだったでしょうか。
フロントエンドの開発環境に合わせて出力させるフォルダを変更するなどして、うまく組み込めればかなりの効率アップが図れると思います。

以下のURLを参考にしました。ありがとうございました。

https://qiita.com/kyota/items/0730519a8d2e964198fd
https://qiita.com/narikei/items/cc4cf9a649d9a138b1fd
https://dev.classmethod.jp/client-side/javascript/gulp-solo-adv-cal-26/