在任务内部运行时Svgmin无限循环

我想让斯维格明在我的gulpfile里工作。这是我当前的配置：

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']);

当我运行

gulpsvg

时，它运行正确，没有任何错误。但是当我运行

gulp

（以及

service

任务）时，

svg

任务以无限循环结束。我做错了什么？我想让我的gulp在有新文件或更改时缩小SVG文件，然后用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'...

---

您的问题源于此手表：

gulp.watch("assets/img/**/*.svg", ['svg']);

每当触摸svg文件时，都会运行

svg

任务。在

svg

任务中，执行以下操作：

return gulp.src('assets/img/**/*.svg')
  .pipe(svgmin())
  .pipe(gulp.dest('assets/img/'));

这将缩小所有SVG文件，并用其缩小版本替换每个文件。因此发生的情况是：

• svg

  任务已运行
• 所有SVG文件都将替换为其缩小版本
• 监视被触发，因为SVG文件已被触摸

• svg

  任务已运行
• 所有SVG文件都将替换为其缩小版本
• 监视被触发，因为SVG文件已被触摸
• 等等

你需要打破这种循环

一种方法是将缩小的SVG文件放入

assets/build

目录，就像您在其他任务中处理文件一样：

return gulp.src('assets/img/**/*.svg')
  .pipe(svgmin())
  .pipe(gulp.dest('assets/build/'));

如果确实要替换SVG文件，可以使用。如果没有实际的内容更改，它可以防止SVG文件被覆盖：

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());
});

---

这还有一个额外的好处，即您的

svg

任务将运行得更快，因为现在只需要处理修改过的文件。

除了@Sven所说的以外，您的gulp.task（'default'、['sass'、'svg'、'javascripts'、'service'）；除了里面的“上菜”外，什么都不需要“服务”将在其他三个任务更改时运行它们。