0

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)

1 ответ 1

0

Ответ на мой вопрос

    // Пишем препроцессор
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/**/*.html','app/*.html'])
        .pipe(fileInclude({
            prefix: '@@',
            basepath: '@file'
        }))
        .pipe(dest('dist/'))
        .pipe(browserSync.stream()) // Триггерим Browsersync для обновления страницы
        .on('change', browserSync.reload)
}

// Удаляем всё содержимое папки "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','app/*.html'],fileinclude);
}

// Таски
exports.browsersync = browsersync;
exports.scripts = scripts;
exports.styles = styles;
exports.fileinclude = fileinclude;
exports.cleandist = cleandist;

exports.dist = series(cleandist, styles, fileinclude, scripts, browsersync, startwatch);
exports.default = parallel(cleandist, styles, fileinclude, scripts, browsersync, startwatch)

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.