Я не могу понять, как отслеживать новые файлы с помощью 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']);