gulp-svg-sprites 项目使用教程

gulp-svg-sprites 项目使用教程

gulp-svg-sprites Create SVG sprites or compile to 项目地址: https://gitcode.com/gh_mirrors/gu/gulp-svg-sprites

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

gulp-svg-sprites/
├── bin/
│   └── gulp-svg-sprites.js
├── lib/
│   ├── config.js
│   ├── sprite.js
│   └── utils.js
├── test/
│   ├── fixtures/
│   └── test.js
├── .gitignore
├── .npmignore
├── gulpfile.js
├── LICENSE
├── package.json
└── README.md

• bin/: 包含项目的可执行文件。
• lib/: 包含项目的主要逻辑代码。
  • config.js: 配置文件，定义了项目的默认配置。
  • sprite.js: 处理SVG图标的逻辑。
  • utils.js: 包含一些工具函数。
• test/: 包含项目的测试文件。
  • fixtures/: 测试用例的静态资源。
  • test.js: 测试代码。
• .gitignore: Git忽略文件列表。
• .npmignore: npm发布时忽略的文件列表。
• gulpfile.js: Gulp任务配置文件。
• LICENSE: 项目许可证。
• package.json: 项目的npm配置文件。
• README.md: 项目的说明文档。

2. 项目的启动文件介绍

项目的启动文件是 gulpfile.js。该文件定义了Gulp任务，用于生成SVG精灵图。以下是 gulpfile.js 的主要内容：

var gulp = require('gulp');
var svgSprite = require('gulp-svg-sprites');

gulp.task('sprites', function () {
    return gulp.src('src/icons/*.svg')
        .pipe(svgSprite())
        .pipe(gulp.dest('dist/sprites'));
});

gulp.task('default', ['sprites']);

• gulp.task('sprites', function () {...}): 定义了一个名为 sprites 的任务，该任务会读取 src/icons/ 目录下的所有SVG文件，并使用 gulp-svg-sprites 插件生成SVG精灵图，最终输出到 dist/sprites 目录。
• gulp.task('default', ['sprites']): 定义了默认任务，当执行 gulp 命令时，会自动运行 sprites 任务。

3. 项目的配置文件介绍

项目的配置文件是 lib/config.js。该文件定义了 gulp-svg-sprites 插件的默认配置。以下是 config.js 的主要内容：

module.exports = {
    mode: {
        css: {
            render: {
                css: true
            }
        }
    },
    svg: {
        xmlDeclaration: false,
        doctypeDeclaration: false
    },
    padding: 10
};

• mode: 定义了生成SVG精灵图的模式。css 模式会生成一个CSS文件，用于控制SVG图标的样式。
  • render.css: 是否生成CSS文件。
• svg: SVG文件的配置。
  • xmlDeclaration: 是否包含XML声明。
  • doctypeDeclaration: 是否包含DOCTYPE声明。
• padding: 每个SVG图标之间的间距。

gulp-svg-sprites Create SVG sprites or compile to 项目地址: https://gitcode.com/gh_mirrors/gu/gulp-svg-sprites