GULP: как следить за новыми изображениями при использовании browserSync?

Question

Я не могу понять, как отслеживать новые файлы с помощью gulp-watch и применять gulp-image при использовании моего browserSync... Когда я добавляю новое изображение в папку с изображениями (./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

Измените эту задачу следующим образом:

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 не наблюдает за добавленными или удаленными файлами. Я не проверял это для себя, хотя.