r45her
@r45her
HTML-верстальщик / Frontend разработчик

Как сделать, чтобы gulp реагировал на удаление файлов?

Вот содержимое моего gulpfile.js. Всё работает, но watch-ер не срабатывает при удалении файла (нужно, чтобы он автоматом удалял его из папки dist. Слышал, что есть плагин gulp-watch, но я в нём не разобрался.

/* ===== ПОДКЛЮЧЕНИЕ ПЛАГИНОВ ===== */
var
	gulp         = require('gulp'),                         // GULP
	sass         = require('gulp-sass'),                    // Препроцессор Sass
	browserSync  = require('browser-sync'),                 // Автоперезагрузка браузера
	concat       = require('gulp-concat'),                  // Конкатенация (соединение) файлов
	uglify       = require('gulp-uglifyjs'),                // Сжатие JS
	rename       = require('gulp-rename'),                  // Для переименования файлов
	del          = require('del'),                          // Для удаления файлов и папок
	imagemin     = require('gulp-imagemin'),                // Для работы с изображениями
	pngquant     = require('imagemin-pngquant'),            // Для работы с PNG
	autoprefixer = require('gulp-autoprefixer'),            // Автоматическое добавление префиксов
	include      = require('gulp-file-include'),            // Подключение файлов в другие файлы
	queries      = require('gulp-group-css-media-queries'), // Объединение медиа запросов
	plumber      = require('gulp-plumber'),                 // Перехват ошибок
	gutil        = require('gulp-util'),                    // Различные вспомогательные утилиты
	cssImport    = require('gulp-cssimport')                // Работа @import для CSS файлов



/* ========= ПЕРЕМЕННЫЕ =========== */

// Перезагрузка сервера
var reload = browserSync.reload;

// Перехват ошибок
var err = {
	errorHandler: function (error) {
		gutil.log('Error: ' + error.message);
		gutil.beep();
		this.emit('end');
	}
}

// Пути
var app = 'app/'; //Папка исходников
var dist = 'dist/'; //Папка готового проекта

/* ================================ */



/* ===== ТАСК "BROWSER-SYNC" ====== */
gulp.task('browser-sync', function() {
	browserSync({ // Выполняем browserSync
		server: { // Определяем параметры сервера
			baseDir: dist // Директория для сервера
		},
		notify: false // Отключаем уведомления
	});
});
/* ================================ */

/* ========= ТАСК "HTML" ========== */
gulp.task('html', function () {
	return gulp.src(app + '*.html') //Выберем файлы по нужному пути
		.pipe(plumber(err)) // Отслеживаем ошибки
		.pipe(include()) // Прогоним через file-include
		.pipe(gulp.dest(dist)) //Выплюнем их
		.pipe(reload({stream: true})); //Перезагрузим сервер
});
/* ================================ */

/* ========= ТАСК "SASS" ========== */
gulp.task('sass', function() {
	return gulp.src(app + 'src/style.scss') // Берём источник
		.pipe(plumber(err)) // Отслеживаем ошибки
		.pipe(sass({outputStyle: 'expanded'})) // Преобразуем SCSS в CSS
		.pipe(queries()) // Объединяем медиа запросы
		.pipe(autoprefixer(['last 15 versions', '>1%', 'ie 8', 'ie 7'], {cascade: true})) // Создаём префиксы
		.pipe(gulp.dest(dist + 'css/')) // Выгружаем результат
		.pipe(reload({stream: true})); //Перезагружаем сервер
});
/* ================================ */

/* ======= ТАСК "CSS-LIBS" ======== */
gulp.task('css-libs', function() {
	return gulp.src(app + 'src/libs.scss') // Берём источник
		.pipe(plumber(err)) // Отслеживаем ошибки
		.pipe(cssImport()) // Загружаем в файл все CSS
		.pipe(sass({outputStyle: 'compressed'})) // Преобразуем SCSS в CSS
		.pipe(rename({suffix: '.min'})) // Добавляем суффикс ".min"
		.pipe(gulp.dest(dist + 'css')) // Выгружаем
		.pipe(reload({stream: true})); //Перезагружаем сервер
});
/* ================================ */

/* ======== ТАСК "JS" ======== */
gulp.task('js', function() {
	return gulp.src([app + 'src/**/*.js', '!' + app + 'src/libs.js']) // Берём все необходимые скрипты
		.pipe(plumber(err)) // Отслеживаем ошибки
		.pipe(concat('script.js')) // Собираем их в один файл
		.pipe(gulp.dest(dist + 'js')) // Выгружаем
		.pipe(reload({stream: true})); //Перезагружаем сервер
});
/* ================================ */

/* ======== ТАСК "JS-LIBS" ======== */
gulp.task('js-libs', function() {
	return gulp.src(app + 'src/libs.js') // Берём все необходимые скрипты
		.pipe(plumber(err)) // Отслеживаем ошибки
		.pipe(include()) // Собираем их в один файл
		.pipe(uglify()) //Сжимаем
		.pipe(rename({suffix: '.min'})) // Добавляем суффикс ".min"
		.pipe(gulp.dest(dist + 'js')) // Выгружаем
		.pipe(reload({stream: true})); //Перезагружаем сервер
});
/* ================================ */

/* ========== ТАСК "IMG" ========== */
gulp.task('img', function() {
	return gulp.src(app + 'img/**/*') // Берём все изображения
		.pipe(cache(imagemin({ // Сжимаем их с наилучшими настройками с учётом кэширования
			interlaced: true,
			progressive: true,
			svgoPlugins: [{removeViewBox: false}],
			use: [pngquant()]
		})))
		.pipe(gulp.dest(dist + 'img')) // Выгружаем на продакшн
		.pipe(reload({stream: true})); //Перезагружаем сервер
});
/* ================================ */

/* ========= ТАСК "FONTS" ========= */
gulp.task('fonts', function() {
	return gulp.src(app + 'fonts/**/*') // Берём шрифты
		.pipe(gulp.dest(dist + 'fonts')) // Выгружаем на продакшн
		.pipe(reload({stream: true})); //Перезагружаем сервер
});
/* ================================ */

/* ========= ТАСК "CLEAN" ========= */
gulp.task('clean', function() {
	return del.sync(dist); // Удаляем папку "dist" перед сборкой
});
/* ================================ */

/* ========= ТАСК "BUILD" ========= */
gulp.task('build', [
	'clean',
	'html',
	'sass',
	'css-libs',
	'js',
	'js-libs',
	'img',
	'fonts'
]);
/* ================================ */

/* ========= ТАСК "WATCH" ========= */
gulp.task('watch', function() {
	gulp.watch(app + '**/*.html', ['html']); // Наблюдение за HTML файлами
	gulp.watch([app + 'src/**/*.scss', '!' + app + 'src/libs.scss'], ['sass']); // Наблюдение за своими SCSS файлами
	gulp.watch(app + 'src/libs.scss', ['css-libs']); // Наблюдение за скачанными CSS файлами
	gulp.watch([app + 'src/**/*.js', '!' + app + 'src/libs.js'], ['js']); // Наблюдение за своими JS файлами
	gulp.watch(app + 'src/libs.js', ['js-libs']); // Наблюдение за скачанными JS файлами
	gulp.watch(app + 'img/*', ['img']); // Наблюдение за картинками
	gulp.watch(app + 'fonts/*', ['fonts']); // Наблюдение за шрифтами
});
/* ================================ */

/* ===== КОМАНДА ПО УМОЛЧАНИЮ ===== */
gulp.task('default', ['build', 'browser-sync', 'watch']);
/* ================================ */
  • Вопрос задан
  • 873 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы