gulp-sketch

gulp-sketch은 gulp에서 SketchTool까지 사용할 수있는 플러그인입니다.

※이 문서는 gulp-sketch 희귀 D 째. 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 : 웹에 최적화 (예)/없음 (아니오)

compact : Compact 형식으로 설정 (YES)/없음 (NO) ※SVG 출력에서만 유효.

trimmed : Export images trimmed. (optional, defaults to NO).

위의 SketchTool 옵션 외에도 SVG를 출력하는 경우 clean 옵션을 사용할 수 있습니다.

clean : SVG 파일에서 Sketch 네임 스페이스 정보 등을 제거 (YES)/제거하지 않음 (NO) ※자세한 것은, clean-sketch 참조

레이어 명명

레이어 이름은 그대로 내보낼 파일의 이름입니다. 슬래시를 사용하면 서브디렉토리에 출력할 수 있습니다. 공식 문서

레이어 이름 yellow에서 { format:'png' } 옵션으로 출력 → yellow.png

레이어 이름 square/yellow에서 동일한 옵션으로 출력 → square 디렉토리에 yellow.png

질문·피드백

GitHub의 Issue에 오세요. 일본어로 OK입니다. 풀 요청도 환영합니다.

htps : // 기주 b. 코 m / 코 g와 m / 구 lps tch / 이스 s