Question

我正在尝试让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']);

当我运行gulp svg时，它运行正常，没有任何错误。但是当我运行gulp（以及serve任务）时，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'...

Answer 1

您的问题源于此手表：

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文件，可以使用gulp-cached plugin。如果没有实际的内容更改，它可以防止覆盖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任务运行得更快，因为现在只需要处理修改后的文件。

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

1 个答案: