Задать вопрос
@14frol14
gulp.js

Gulp выдает ошибку, как исправить?

Комрады привет.
Изучаю Gulp, выходит ошибка и не могу понять почему, хотя все делаю по документации. Подскажите, а?
Делаю gulp.task('build') он отрабатывает как нужно, все создает где нужно, но вот дальше нет. А хочу еще авторелоад браузера сделать, чтобы при изменении css и html браузер сам себе F5 нажимал.
Код ниже. Заранее спасибо за ответы.
Особо не пинайте..новичек.
const gulp = require('gulp');
var browserSync = require('browser-sync').create();
const sourcemaps = require('gulp-sourcemaps');
const autoprefixer = require('gulp-autoprefixer');
let cleanCSS = require('gulp-clean-css');

gulp.task('build', () =>
gulp.src('./src/precss/**/*.css')
.pipe(sourcemaps.init())
.pipe(autoprefixer({
overrideBrowserslist: ['last 2 versions'],
cascade: false
}))
.pipe(cleanCSS())
.pipe(sourcemaps.write())
.pipe(gulp.dest('./src/css'))
.pipe(browserSync.stream())
);
// ---- С этого момента не работает.
gulp.task('serve', ['build'], function() {

browserSync.init({
server: "./"
});

gulp.watch("./src/precss/**/*.css", ['build']);
gulp.watch("./*.html").on('change', browserSync.reload);
});

gulp.task('default', ['serve']);

C:\OSPanel\domains\localhost\Dz>gulp default
assert.js:375
throw err;
^

AssertionError [ERR_ASSERTION]: Task function must be specified
at Gulp.set [as _setTask] (C:\OSPanel\domains\localhost\Dz\node_modules\undertaker\lib\set-task.js:10:3)
at Gulp.task (C:\OSPanel\domains\localhost\Dz\node_modules\undertaker\lib\task.js:13:8)
at Object. (C:\OSPanel\domains\localhost\Dz\gulpfile.js:20:6)
at Module._compile (internal/modules/cjs/loader.js:776:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
at Module.load (internal/modules/cjs/loader.js:643:32)
at Function.Module._load (internal/modules/cjs/loader.js:556:12)
at Module.require (internal/modules/cjs/loader.js:683:19)
at require (internal/modules/cjs/helpers.js:16:16)
at execute (C:\Users\Alex\AppData\Roaming\npm\node_modules\gulp-cli\lib\versioned\^4.0.0\index.js:36:18) {
generatedMessage: false,
code: 'ERR_ASSERTION',
actual: false,
expected: true,
operator: '=='
}

5d284c79e29a5275483253.png

5d284ce55b669473430175.png
  • Вопрос задан
  • 459 просмотров
2 комментария
Подписаться 1 Простой 2 комментария
Пригласить эксперта
Ответы на вопрос 1
Anitamsk
@Anitamsk
Frontend Dev
В 4 версии gulp появилось распаралеливание, поэтому добавьте скобки в конце. И будет вам счастье.

const gulp = require('gulp');             
const sass = require('gulp-sass');        
const concat = require('gulp-concat')
const autoprefixer = require('gulp-autoprefixer');
const cleanCSS = require('gulp-clean-css');
const browserSync = require('browser-sync').create();
const sourcemaps = require('gulp-sourcemaps');
const gcmq = require('gulp-group-css-media-queries');

const config = {
    src: './src',
    css: {
        watch: '/precss/**/*.sass',                     
        src: '/precss/main.sass',
        dest: '/css'                                        
    },
    html: {
        src: '/*.html'
    }
};

gulp.task('build', function () {
    return gulp.src(config.src + config.css.src)
            .pipe(sourcemaps.init())
            .pipe(sass().on('error', sass.logError))
            .pipe(gcmq())
            .pipe(autoprefixer({    
                overrideBrowserslist:  ['> 0.01%'],
                cascade: false
            }))
            // .pipe(cleanCSS({
            //     level: 2
            // }))
            .pipe(sourcemaps.write('.'))
            .pipe(gulp.dest(config.src + config.css.dest))
            .pipe(browserSync.reload({
                stream: true
            }));
});

gulp.task('watch', function () {
    gulp.watch(config.src + config.css.watch, gulp.parallel('build'));
    gulp.watch(config.src + config.html.src).on('change', browserSync.reload);
});

gulp.task('browserSync', function () {
    browserSync.init({
        server: {
            baseDir: config.src
        }
        // online: true,
        // tunnel: true,
        // logLevel: "debug"
    });
});

gulp.task('dist', function(){
    return gulp.src([
        './src/fonts/**/*.{woff,woff2}',
        './src/img/**',
        './src/js/**',
        './src/*html',
        './src/css/*.css'
    ], {
        base: './src'
    })
    .pipe(gulp.dest('dist'))
});

gulp.task('default', gulp.parallel('watch','browserSync', 'build'));
Ответ написан
1 комментарий
1 комментарий
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Ведущий системный администратор
U-System • Воронеж
от 120 000 ₽
Python Backend Разработчик
Stakewolle
от 35 000 до 45 000 ₽
Менеджер по продажам (B2B, IT)
НаПоправку • Санкт-Петербург
от 110 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Собрать сайт на Vue / Laravel
19 апр. 2024, в 11:14
65000 руб./за проект
Отрисовка дизайна главной и внутренней
19 апр. 2024, в 11:08
5000 руб./за проект
Работы по АСУТП
19 апр. 2024, в 10:59
150000 руб./за проект
Ещё заказы