gulp-sketch 项目教程

gulp-sketch 项目教程

gulp-sketchA SketchTool plugin for gulp项目地址:https://gitcode.com/gh_mirrors/gu/gulp-sketch

1. 项目的目录结构及介绍

gulp-sketch/
|-- node_modules/
|-- sketch/
|   |-- icons.sketch
|-- gulpfile.js
|-- package.json
|-- package-lock.json
|-- README.md
|-- LICENSE
|-- install-sketchtool.sh

• node_modules/: 存放项目依赖的模块。
• sketch/: 存放 Sketch 设计文件。
• gulpfile.js: 项目的启动文件，定义了 gulp 任务。
• package.json: 项目的配置文件，包含了项目的依赖和脚本。
• package-lock.json: 锁定依赖模块的版本。
• README.md: 项目的说明文档。
• LICENSE: 项目的许可证。
• install-sketchtool.sh: 用于安装 SketchTool 的脚本。

2. 项目的启动文件介绍

gulpfile.js

gulpfile.js 是项目的启动文件，定义了 gulp 任务。以下是文件的主要内容：

const gulp = require('gulp');
const sketch = require('gulp-sketch');
const gutil = require('gulp-util');
const which = require('npm-which')(__dirname);

gulp.task('sketch', function() {
  try {
    which.sync('sketchtool');
  } catch(error) {
    gutil.log(error);
    return;
  }
  return gulp.src('/src/sketch/*.sketch')
    .pipe(sketch({
      export: 'slices',
      formats: 'png'
    }))
    .pipe(gulp.dest('/dist/images/'));
});

• 引入模块: 引入了 gulp, gulp-sketch, gulp-util, 和 npm-which 模块。
• 定义任务: 定义了一个名为 sketch 的任务，用于导出 Sketch 文件中的切片为 PNG 格式。
• 错误处理: 尝试查找 sketchtool，如果找不到则输出错误信息。

3. 项目的配置文件介绍

package.json

package.json 是项目的配置文件，包含了项目的依赖和脚本。以下是文件的主要内容：

{
  "name": "gulp-sketch",
  "version": "1.0.0",
  "description": "A SketchTool plugin for gulp",
  "main": "gulpfile.js",
  "scripts": {
    "install-sketchtool": "sh install-sketchtool.sh"
  },
  "dependencies": {
    "gulp": "^4.0.2",
    "gulp-sketch": "^2.0.0",
    "gulp-util": "^3.0.8",
    "npm-which": "^3.0.1"
  },
  "devDependencies": {},
  "author": "",
  "license": "MIT"
}

• 项目信息: 包含了项目的名称、版本、描述等信息。
• 脚本: 定义了一个名为 install-sketchtool 的脚本，用于安装 sketchtool。
• 依赖: 列出了项目运行所需的依赖模块。
• 许可证: 项目的许可证为 MIT。

以上是 gulp-sketch 项目的基本教程，包含了项目的目录结构、启动文件和配置文件的介绍。希望对你有所帮助！

gulp-sketchA SketchTool plugin for gulp项目地址:https://gitcode.com/gh_mirrors/gu/gulp-sketch