@KononovD

И снова.. Почему Gulp 4 не работает?

Подскажите, пожалуйста. Почему это не работает?
Может кто-то взять к себе и протестировать?
https://github.com/KononovD/kononovD.github.io/tre...
тут сам gulpfile.js и package.json

Ошибка следующая
[22:37:09] Using gulpfile ~\Desktop\testGulp\gulpfile.js
[22:37:09] Starting 'default'...
[22:37:09] Starting 'build'...
[22:37:09] Starting 'clean:build'...
[22:37:09] Finished 'clean:build' after 2.01 ms
[22:37:09] Starting 'html:build'...
[22:37:09] Finished 'html:build' after 13 ms
[22:37:09] Starting 'scss:build'...
[22:37:09] 'scss:build' errored after 4.53 ms
[22:37:09] TypeError: dest.on is not a function
at DestroyableTransform.Readable.pipe (C:\Users\я\Desktop\testGulp\node_modules\readable-stream\lib\_stream_readable.js:564:8)
at DestroyableTransform.pipe2 (C:\Users\я\Desktop\testGulp\node_modules\gulp-plumber\index.js:72:14)
at C:\Users\я\Desktop\testGulp\gulpfile.js:82:10
at taskWrapper (C:\Users\я\Desktop\testGulp\node_modules\undertaker\lib\set-task.js:13:15)
at bound (domain.js:395:14)
at runBound (domain.js:408:12)
at asyncRunner (C:\Users\я\Desktop\testGulp\node_modules\async-done\index.js:55:18)
at process._tickCallback (internal/process/next_tick.js:61:11)
[22:37:09] 'build' errored after 23 ms
[22:37:09] 'default' errored after 26 ms

Мне почему-то кажется, что все дело в автопрефиксере..

И еще может кто объяснить в чем разница 2х наблюдателей? Они в самом низу, первый (закомментированный) не просит модуль "gulp-warch", а 2й просит.. В чем разница?
Спасибо.

"use strict";

var config = {
    server: {
        baseDir: './dist'
    },
    notify: false
};

var path = {
    dist: {
        html: 'dist/',
        js: 'dist/js/',
        jsmain: 'dist/js',
        css: 'dist/css/',
        img: 'dist/img/',
        fonts: 'dist/fonts/'
    },
    app: {
        html: 'app/*.html',
        js: 'app/js/*.js',
        jsmain: 'app/js/main.js',
        scss: 'app/css/*.scss',
        css: 'app/css/*.css',
        img: 'app/img/**/*.*',
        fonts: 'app/fonts/**/*.*'
    },
    watch: {
        html: 'app/**/*.html',
        js: 'app/js/**/*.js',
        scss: 'app/css/*.scss',
        css: 'app/css/*.css',
        img: 'app/img/**/*.*',
        fonts: 'app/fonts/**/*.*'
    },
    clean: './dist/'
};

var gulp = require("gulp"),
    watch = require('gulp-watch'), // смотритель
    webserver = require('browser-sync'), // сервер для работы и автоматического обновления страниц
    plumber = require('gulp-plumber'), // модуль для отслеживания ошибок
    rigger = require('gulp-rigger'), // модуль для импорта содержимого одного файла в другой
    sourcemaps = require('gulp-sourcemaps'), // модуль для генерации карты исходных файлов
    sass = require('gulp-sass'), // модуль для компиляции SASS (SCSS) в CSS
    autoprefixer = require('autoprefixer'), // модуль для автоматической установки автопрефиксов
    cleanCSS = require('gulp-clean-css'), // плагин для минимизации CSS
    uglify = require('gulp-uglify'), // модуль для минимизации JavaScript
    cache = require('gulp-cache'), // модуль для кэширования
    imagemin = require('gulp-imagemin'), // плагин для сжатия PNG, JPEG, GIF и SVG изображений
    jpegrecompress = require('imagemin-jpeg-recompress'), // плагин для сжатия jpeg
    pngquant = require('imagemin-pngquant'), // плагин для сжатия png
    del = require('del'); // плагин для удаления файлов и каталогов


/* задачи */

// запуск сервера +
gulp.task('webserver', function (done) {
    browserSync(config);
    done();
});

// сбор html
gulp.task('html:build', function (done) {
    gulp.src(path.app.html) // выбор всех html файлов по указанному пути
        .pipe(plumber()) // отслеживание ошибок
        .pipe(rigger()) // импорт вложений
        .pipe(gulp.dest(path.dist.html)) // выкладывание готовых файлов
        .pipe(webserver.reload({stream: true})); // перезагрузка сервера
    done();
});

// сбор стилей
gulp.task('scss:build', function (done) {
    gulp.src(path.app.scss) // получим main.scss
        .pipe(plumber()) // для отслеживания ошибок
        .pipe(sourcemaps.init()) // инициализируем sourcemap
        .pipe(sass({
            outputStyle: 'expanded'
        }).on('error', sass.logError)) // scss -> css
        .pipe(autoprefixer(/*{тут был автопрефиксер-лист(галп-автопрефиксер я поменял его на просто автопрефиксер)}*/)) // добавим префиксы
        .pipe(cleanCSS()) // минимизируем CSS
        .pipe(sourcemaps.write('./')) // записываем sourcemap
        .pipe(gulp.dest(path.dist.css)) // выгружаем в dist
        .pipe(webserver.reload({stream: true})); // перезагрузим сервер
    done();
});

gulp.task('css:build', function (done) {
    gulp.src(path.app.css)
        .pipe(gulp.dest(path.dist.css));// Переносим скрипты в продакшен
    done();
});

// сбор js
gulp.task('jsmain:build', function (done) {
    gulp.src(path.app.jsmain) // получим файл main.js
        .pipe(plumber()) // для отслеживания ошибок
        .pipe(rigger()) // импортируем все указанные файлы в main.js
        .pipe(sourcemaps.init()) //инициализируем sourcemap
        .pipe(uglify()) // минимизируем js
        .pipe(sourcemaps.write('./')) //  записываем sourcemap
        .pipe(gulp.dest(path.dist.jsmain)) // положим готовый файл
        .pipe(webserver.reload({stream: true})); // перезагрузим сервер
    done();
});

gulp.task('js:build', function (done) {
    gulp.src([path.app.js, '!app/js/main.js'])
        .pipe(gulp.dest(path.dist.js));// Переносим скрипты в продакшен
    done();
});

// перенос шрифтов
gulp.task('fonts:build', function (done) {
    gulp.src(path.app.fonts)
        .pipe(gulp.dest(path.dist.fonts));
    done();
});

// обработка картинок
gulp.task('image:build', function (done) {
    gulp.src(path.app.img) // путь с исходниками картинок
        .pipe(cache(imagemin([ // сжатие изображений
            imagemin.gifsicle({interlaced: true}),
            jpegrecompress({
                progressive: true,
                max: 90,
                min: 80
            }),
            pngquant(),
            imagemin.svgo({plugins: [{removeViewBox: false}]})
        ])))
        .pipe(gulp.dest(path.dist.img)); // выгрузка готовых файлов
    done();
});

// удаление каталога dist
gulp.task('clean:build', function (done) {
    del.sync(path.clean);
    done();
});

// очистка кэша
gulp.task('cache:clear', function (done) {
    cache.clearAll();
    done();
});

// сборка
gulp.task('build', gulp.series('clean:build', 'html:build', 'scss:build', 'css:build', 'js:build', 'jsmain:build', 'fonts:build', 'image:build', function (done) {
    done();
}));

// запуск задач при изменении файлов
/*
gulp.task('watch', function () {
    gulp.watch(path.watch.html, ['html:build']);
    gulp.watch(path.watch.css, ['css:build']);
    gulp.watch(path.watch.js, ['js:build']);
    gulp.watch(path.watch.img, ['image:build']);
    gulp.watch(path.watch.fonts, ['fonts:build']);
    gulp.watch(path.watch.fonts, ['jsmain:build']);
});
*/

gulp.task('watch', function (done) {
    watch([path.watch.html], function (event, cb) {
        gulp.start('html:build');
    });
    watch([path.watch.css], function (event, cb) {
        gulp.start('css:build');
    });
    watch([path.watch.scss], function (event, cb) {
        gulp.start('scss:build');
    });
    watch([path.watch.js], function (event, cb) {
        gulp.start('js:build');
    });
    watch([path.watch.img], function (event, cb) {
        gulp.start('image:build');
    });
    watch([path.watch.fonts], function (event, cb) {
        gulp.start('fonts:build');
    });
    done();
});

// задача по умолчанию
gulp.task('default', gulp.series(/*'clean:build', */ 'build', 'webserver', 'watch', function () {
}));


Еще раз спасибо)
  • Вопрос задан
  • 7140 просмотров
Решения вопроса 1
@KononovD Автор вопроса
Короче говоря я во всем разобрался. Вот ссылка на гитхаб с моим шаблоном проекта.
https://github.com/KononovD/kononovD.github.io/tre...
(закидываем папку app, gulpfile и package к себе в проект, в коноле пишем npm i, потом ждем установки всего, после пишем gulp и все работает.)
П.с. в gulpfile есть комментарии, что бы было понятно что к чему и почему.
(ну, малоли, кому-то пригодиться)
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
virtual_hack2root
@virtual_hack2root
.NET Core, JS, DevOps
Во-первых, добавьте browserSync

var browserSync = require('browser-sync').create();

Во-вторых верните gulp-autoprefixer

В третьих, сконвертируйте browserSync в новый синтаксис

browserSync.init(config);
Написано 8 минут назад
Ответ написан
Ваш ответ на вопрос

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

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