This document covers only gulp specific installation and configuration aspects. For a full list of features and options, please see the svg-sprite manual.
Usage
First, install gulp-svg-sprite as a development dependency:
npm install --save-dev gulp-svg-sprite
Then, add it to your gulpfile.js:
constgulp=require('gulp');constsvgSprite=require('gulp-svg-sprite');gulp.src('path/to/assets/*.svg').pipe(svgSprite(/* ... Insert your configuration here ... */)).pipe(gulp.dest('out'));
NOTICE: By default, svg-spritedoesn't send any files downstream unless you configure it. There are tons of options available — please see below for some basic examples. Also, you should possibly take care of errors that might occur.
API
svgSprite(options)
As options argument you may provide a main configuration object as described in the svg-sprite manual. Configuration-wise, svg-sprite and gulp-svg-sprite differ only in one respect:
options.dest
Type: String
Default value: '.'
With Gulp, there is no need to specifiy a main output directory, as the generated files are piped to the next step of the running task anyway. The options.dest value (if given) is simply ignored.
Examples
Basic example
In this very basic example, mostly default settings will be applied to create a traditional CSS sprite (bundle of SVG sprite and CSS stylesheet).
The cryptical looking part in the SVG's file name is the result of svg-sprite's cache busting feature which is enabled by default for CSS sprites. We'll turn this off in the next example.
Errors might always happen — maybe there are some corrupted source SVG files, the default SVGO plugin configuration is too aggressive or there's just an error in svg-sprite's code. To make your tasks more robust, you might consider using plumber and adding your custom error handling:
constgulp=require('gulp');constsvgSprite=require('gulp-svg-sprite');constplumber=require('gulp-plumber');// Basic configuration exampleconstconfig={mode: {css: {render: {css: true}}}};gulp.src('**/*.svg',{cwd: ''}).pipe(plumber()).pipe(svgSprite(config)).on('error',function(error){/* Do some awesome error handling ... */}).pipe(gulp.dest('out'));
请发表评论