GULP：如何在使用 browserSync 时查看新图像？

Question

我不知道如何在使用 browserSync 时使用 gulp-watch 监视新文件并应用 gulp-image。 .. 当我在图像文件夹 (./fixtures/*) 中添加新图像时，什么也没有发生。我会在命令行中手动执行此操作，但我必须关闭我的 browserSync（这不是一个真正可行的解决方案）。所以...这就是我的 gulpfile.js 的样子：

var input = "./scss/*.scss";
var output = "./"
var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync').create();
var sourcemaps = require('gulp-sourcemaps');
var autoprefixer = require('gulp-autoprefixer');
var sassdoc = require('sassdoc');
var image = require('gulp-image');

// scss + sourceMaps

gulp.task('styles', function() {
  gulp.src(input)
    .pipe(sourcemaps.init())
    .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
    .pipe(autoprefixer())
    .pipe(sourcemaps.write('./maps'))
    .pipe(gulp.dest(output))
    .pipe(browserSync.reload({stream: true}));
});

// scss + browserSync

gulp.task('serve', function() {

    browserSync.init({
        server: {
          baseDir: output
        }
    });

    gulp.watch(input, ['styles']);
    gulp.watch("./**/*.html").on('change', browserSync.reload);
});

// sassDoc activation

gulp.task('sassdoc', function () {
  return gulp.src(input)
    .pipe(sassdoc());
});

// image minification

gulp.task('image', function() {
  gulp.watch('./fixtures/*.{png,jpg,jpeg,gif,svg}', function() {
    gulp.src('./fixtures/*.{png,jpg,jpeg,gif,svg}')
      .pipe(image())
      .pipe(gulp.dest('./img'));
  });
});

gulp.task('default', ['styles', 'serve', 'image']);

Answer 1

像这样修改seve任务：

gulp.task('serve', function() {

  browserSync.init({
    server: {
      baseDir: output
    }
  });

  gulp.watch(input, ['styles']);
  gulp.watch("./**/*.html").on('change', browserSync.reload);
  // gulp.watch('./fixtures/*.{png,jpg,jpeg,gif,svg}', ['image']);
  gulp.watch('fixtures/*.{png,jpg,jpeg,gif,svg}', {cwd: './'} ['image']);
});

然后将“图像”任务简化为：

gulp.task('image', function() {
 return gulp.src('./fixtures/*.{png,jpg,jpeg,gif,svg}')
  .pipe(image())
  .pipe(gulp.dest('./img'));
});

您可能希望将 gulp-cached 或 gulp-remember 添加到您的图像管道中，这样您就不会在每次更改或添加图像时都缩小所有图像。

另外，记得像我对图像所做的那样在你的任务中添加返回语句； 'styles' 任务需要一个 return 语句。

编辑：请参阅上面的编辑，看起来 gulp.watch 不喜欢其他问题（例如 gulp.watch not watching added or deleted files）中以“./”开头的 glob。不过，我还没有自己测试过。