Html при обновлении не падает в папку dist, а с css и js проблем нет.
// Пишем препроцессор
let preprocessor = 'scss';
// пордключаем галп
const { src, dest, parallel, series, watch } = require('gulp');
// подключаем нужные модули
const browserSync = require('browser-sync').create();
const concat = require('gulp-concat');
const uglify = require('gulp-uglify-es').default;
// Подключаем модули gulp-sass и gulp-less
const scss = require('gulp-scss');
// Подключаем Autoprefixer
const autoprefixer = require('gulp-autoprefixer');
// Подключаем модуль gulp-clean-css
const cleancss = require('gulp-clean-css');
// Подключаем include для html
const fileInclude = require('gulp-file-include');
// Подключаем удаление
const del = require('del');
//////////////////////////////////////////////////////////////
// функции
function browsersync() {
browserSync.init({
server: {baseDir: 'dist/'}
});
}
// обрабатываем скрипты проекта
function scripts() {
return src([ // Берём файлы из источников
'app/js/app.js', // Пользовательские скрипты, использующие библиотеку, должны быть подключены в конце
])
.pipe(concat('app.min.js')) // Конкатенируем в один файл
.pipe(uglify()) // Сжимаем JavaScript
.pipe(dest('dist/js/')) // Выгружаем готовый файл в папку назначения
.pipe(browserSync.stream()) // Триггерим Browsersync для обновления страницы
}
// обрабатываем стили проекта
function styles() {
return src('app/' + preprocessor + '/main.' + preprocessor + '') // Выбираем источник: "app/sass/main.sass" или "app/less/main.less"
.pipe(eval(preprocessor)()) // Преобразуем значение переменной "preprocessor" в функцию
.pipe(concat('app.min.css')) // Конкатенируем в файл app.min.js
.pipe(autoprefixer({ overrideBrowserslist: ['last 10 versions'], grid: true })) // Создадим префиксы с помощью Autoprefixer
.pipe(cleancss( { level: { 1: { specialComments: 0 } }/* , format: 'beautify' */ } )) // Минифицируем стили
.pipe(dest('dist/css/')) // Выгрузим результат в папку "dist/css/"
.pipe(browserSync.stream()) // Триггерим Browsersync для обновления страницы
}
// обрабатываем html проекта
function fileinclude() {
return src([
'app/index.html'
])
.pipe(fileInclude({
prefix: '@@',
basepath: '@file'
}))
.pipe(dest('dist/'))
.pipe(browserSync.stream()) // Триггерим Browsersync для обновления страницы
}
// Удаляем всё содержимое папки "dist/"
function cleandist() {
return del('dist/**/*', { force: true })
}
// функция отслеживания изменений в файлах
function startwatch() {
// Выбираем все файлы JS в проекте, а затем исключим с суффиксом .min.js
watch(['app/**/*.js', '!app/**/*.min.js'], scripts);
// Мониторим файлы препроцессора на изменения
watch('app/**/' + preprocessor + '/**/*', styles);
// Мониторим файлы HTML на изменения
watch('app/**/*.html').on('change', browserSync.reload);
}
// Таски
exports.browsersync = browsersync;
exports.scripts = scripts;
exports.styles = styles;
exports.fileinclude = fileinclude;
exports.cleandist = cleandist;
exports.dist = series(cleandist, fileinclude, styles, scripts, browsersync, startwatch);
exports.default = parallel(cleandist, styles, scripts, fileinclude, browsersync, startwatch)