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

Я не могу понять, как отслеживать новые файлы с помощью gulp-watch и применять gulp-image при использовании моей browserSync... Когда Я добавляю новое изображение в папку с изображениями (./fixtures/*), ничего не происходит. Я бы сделал это вручную в командной строке, но мне пришлось бы закрыть браузерSync (не совсем жизнеспособное решение). Итак... вот как выглядит мой 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']);

gulp browser-sync gulp-browser-sync gulp-watch gulp-imagemin
person jsgagne    schedule 30.08.2017    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Измените задачу 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 в свой конвейер изображений, чтобы не минимизировать все изображения каждый раз, когда одно из них изменяется или добавляется.

Кроме того, не забудьте добавить операторы возврата к своим задачам, как я сделал с изображением; задача «стили» нуждается в операторе возврата.

EDIT: см. редактирование выше, похоже, что gulp.watch не любит глобус, начинающийся с "./" из других вопросов, таких как gulp.watch не отслеживает добавленные или удаленные файлы. Я не проверял это на себе, хотя.

person Mark    schedule 30.08.2017
comment
Спасибо за ответ! Это работает, когда я меняю имя файла в каталоге приборов... но не работает, когда я добавляю файл. Есть идеи ? - person jsgagne; 30.08.2017