Svgmin infinite loop when running inside a task - svg

Question

I'm trying to get svgmin to work in my gulpfile. This is my current config:
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var sass = require('gulp-sass');
var minify = require('gulp-minify');
var uglify = require('gulp-uglify');
var pump = require('pump');
var concat = require('gulp-concat');
var connect = require('gulp-connect-php');
var svgmin = require('gulp-svgmin');
// Static Server + watching scss/html files
gulp.task('serve', function() {
connect.server({}, function (){
browserSync.init({
proxy: '127.0.0.1:8000'
});
});
gulp.watch("assets/scss/*.scss", ['sass']);
gulp.watch("assets/js/*.js", ['javascripts']);
gulp.watch("assets/img/**/*.svg", ['svg']);
gulp.watch('**/*.php').on('change', function () {
browserSync.reload();
});
});
// Optimize SVG
gulp.task('svg', function() {
return gulp.src('assets/img/**/*.svg')
.pipe(svgmin())
.pipe(gulp.dest('assets/img/'));
browserSync.reload();
});
// Compile sass into CSS & auto-inject into browsers
gulp.task('sass', function() {
return gulp.src([
"node_modules/normalize.css/normalize.css",
'node_modules/animate.css/animate.min.css',
"assets/scss/main.scss"
])
.pipe(sass().on('error', sass.logError))
.pipe(minify())
.pipe(concat('main.css'))
.pipe(gulp.dest("assets/build"))
.pipe(browserSync.stream());
});
// Compile javascripts & refresh browser
gulp.task('javascripts', function (cb) {
pump([
gulp.src([
// Javascript files we need
'assets/js/modernizr.js', // Modernizr
'node_modules/jquery/dist/jquery.min.js', // jQuery
'node_modules/gsap/src/minified/TweenMax.min.js', // GSAP Aninmations
'node_modules/scrollmagic/scrollmagic/uncompressed/ScrollMagic.js', // ScrollMagic Main
'node_modules/scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js', // GASP ScrollMagic plugin
'assets/js/main.js' // Main JS file
]),
concat('main.js'),
uglify(),
gulp.dest('assets/build'),
],
cb
);
browserSync.reload();
});
gulp.task('default', ['sass', 'svg', 'javascripts', 'serve']);
When I run gulp svg it runs correctly without any errors. But when I run gulp (and thus the serve task) the svg task ends in a infinite loop. What am I doing wrong here? I want my gulp to minify my SVG files whenever theres a new file or a change, and then update the browser with browerSync.
[15:46:09] Starting 'svg'...
[15:46:10] Finished 'svg' after 823 ms
[15:46:10] Starting 'svg'...
[15:46:11] Finished 'svg' after 609 ms
[15:46:11] Starting 'svg'...
[15:46:11] Finished 'svg' after 618 ms
[15:46:11] Starting 'svg'...
[15:46:12] Finished 'svg' after 630 ms
[15:46:12] Starting 'svg'...

Answer 1

Your problem originates with this watch:
gulp.watch("assets/img/**/*.svg", ['svg']);
This runs the svg task whenever an SVG file is touched. In your svg task you do the following:
return gulp.src('assets/img/**/*.svg')
.pipe(svgmin())
.pipe(gulp.dest('assets/img/'));
This minifies all your SVG files and replaces each file with its minified version. So what happens is:
svg task is run
all SVG files are replaced with their minified version
watch is triggered, because SVG files have been touched
svg task is run
all SVG files are replaced with their minified version
watch is triggered, because SVG files have been touched
etc ...
You need to break that cycle.
One way of doing that is to just place the minified SVG files into the assets/build directory as you do with files in your other tasks:
return gulp.src('assets/img/**/*.svg')
.pipe(svgmin())
.pipe(gulp.dest('assets/build/'));
If you really want to replace the SVG files your can use the gulp-cached plugin. It prevents the SVG files from being overwritten if there are no actual content changes:
var cache = require('gulp-cached');
gulp.task('svg', function() {
return gulp.src('assets/img/**/*.svg')
.pipe(cache('svgmin'))
.pipe(svgmin())
.pipe(gulp.dest('assets/img/'))
.pipe(browserSync.stream());
});
This has the added benefit that your svg task will run faster, since only modified files will need to be processed now.