Tsympil/gulp-raster

gulp task for conversion svg to raster

★ 1Forks 0JavaScriptGitHub ↗Compare

README

gulp-raster

NPM version Dependency Status

Rasterization plugin for gulp. It`s build on phantomjs, but, in contrast to svg2png, does not deal with fs(creating or reading tmp files).

Usage

First, install gulp-raster as a development dependency:

npm i -S gulp-raster

Then, add it to your gulpfile.js:

var raster = require('gulp-raster');
var rename = require('gulp-rename');

gulp.src('./src/**/svg/*.svg')
    .pipe(raster())
    .pipe(rename({extname: '.png'}))
    .pipe(gulp.dest('./dist')),

You also can specify scale and file format. Let`s say you want get icon set for retina:

var raster = require('gulp-raster');
var rename = require('gulp-rename');

gulp.src('./src/**/svg/*.svg')
    .pipe(raster({format: 'jpg', scale: 2}))
    .pipe(rename({extname: '.jpg', suffix: '-2x'})
    .pipe(gulp.dest('./dist')),

Set output file sizes and styles:

gulp.src('./src/**/svg/*.svg')
    ...
    .pipe(raster({
        format: 'jpg',
        sizes: {
            width: 1200,
            height: 1200
        },
        styles: fs.readFileSync('./raster-styles.css', 'utf8')
    }))
    ...

API

raster(options)

options.scale

Type: Number Default: 1

Set scale rate of output image.

options.format

Type: String Default: png

Set output file format, png/jpg are available.

options.sizes

Type: Object Default: false

Set output file size, width, height or both (will contain inside). Importantly than scale option.

options.styles

Type: String Default: ''

Set custom styles (e.g., if you need to use custom fonts).

License

MIT License

Contributors

OtoutoTsympil

Issues