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