Например, есть gulpfile.js со следующим содержимым:
var gulp = require('gulp');
var svg2png = require('gulp-svg2png');
var spritesmith = require('gulp.spritesmith');
gulp.task('svg2png', function() {
// Модуль gulp.spritesmith не умеет читать содержимое файлов из потока, поэтому изображения сохраняются во временную директорию ./images/tmp
return gulp.src('./images/sprite/*.{svg}')
.pipe(svg2png())
.pipe(gulp.dest('./images/tmp/'));
});
gulp.task('default', ['svg2png'], function() {
var data = gulp.src('./images/tmp/*.{png}')
.pipe(spritesmith({
imgName: 'sprite.png',
cssName: 'sprite.css'
}));
data.img.pipe(gulp.dest('./images/'));
data.css.pipe(gulp.dest('./css/'));
});
Запуск сборки производится командой
gulp default
. Как реализовать всю эту процедуру в одном задании (таске)? Интуитивно приходит идея объединить 2 потока:
var gulp = require('gulp');
var svg2png = require('gulp-svg2png');
var spritesmith = require('gulp.spritesmith');
gulp.task('default', function() {
var data = gulp.src('./images/sprite/*.{svg}')
.pipe(svg2png())
.pipe(gulp.dest('./images/tmp/'))
.pipe(gulp.src('./images/tmp/*.{png}'))
.pipe(spritesmith({
imgName: 'sprite.png',
cssName: 'sprite.css'
}));
data.img.pipe(gulp.dest('./images/'));
data.css.pipe(gulp.dest('./css/'));
});
Но это не работает, потому что поток прерывается на
.pipe(gulp.src('./images/tmp/*.{png}'))
. Можно ли как-то открыть файл внутри потока, не создавая новые задания?