Проблема с настройкой сборки проекта?

Question

[Кирилл]

Добрый день.
Возникла такая проблема: смотрел уроки по сборке проекта, но они вышли плюс минус год назад, я так понял в gulp 4 многое изменилось и код который я написал не работает.
Браузер выдает: Cannot GET /. Что нужно исправить, чтобы сборка заработала?

Код:

// Подключение пакетов

var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var less = require('gulp-less');
var plumber = require('gulp-plumber');
var notify = require('gulp-notify');
var autoprefixer = require('gulp-autoprefixer');
var scss = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
var pug = require('gulp-pug');
var del = require('del');
var runSequence = require('run-sequence');




// Задачи для Gulp

// LESS --> CSS
gulp.task('less', function() {
    return gulp.src('./src/less/main.less')
        .pipe(plumber({
              errorHandler: function(err) {
                notify.onError({
                  title: "Ошибка в CSS",
                  message: "<%= error.message %>"
                })(err);
              }
            }))
        .pipe(sourcemaps.init())
    	.pipe(less())
        .pipe(autoprefixer({
            overrideBrowserslist:  ['last 3 versions'],
            cascade: false
        }))
        .pipe(sourcemaps.write())
    	.pipe(gulp.dest('./build/css/'))
    	.pipe(browserSync.stream());
});


// SASS/SCSS --> CSS
gulp.task('scss', function() {
    return gulp.src('./src/scss/main.scss')
        .pipe(plumber({
            errorHandler: function(err) {
            notify.onError({
                title: "Ошибка в CSS",
                message: "<%= error.message %>"
            })(err);
            }
        }))
        .pipe(sourcemaps.init())
        .pipe(scss())
        .pipe(autoprefixer({
            overrideBrowserslist:  ['last 3 versions'],
            cascade: false
        }))
        .pipe(sourcemaps.write())
        .pipe(gulp.dest('./build/css/'))
        .pipe(browserSync.stream());
});


// .pug --> .html
gulp.task('pug', function() {
    return gulp.src('./src/pug/pages/**/*.pug')

    .pipe(plumber({
        errorHandler: notify.onError(function(err){
            return {
                title: 'Pug',
                message: err.message
            }
        })     
    }))
    .pipe(pug({
        pretty: true
    }))
    .pipe(gulp.dest('./build'))
    .pipe(browserSync.stream());
});


// Копирование
gulp.task('copy:js', function() {
    return gulp.src('src/js/**/*.*')
        .pipe(gulp.dest('./build/js'))
        .pipe(browserSync.stream());
});

gulp.task('copy:libs', function() {
    return gulp.src('src/libs/**/*.*')
        .pipe(gulp.dest('./build/libs'))
        .pipe(browserSync.stream());
});

gulp.task('copy:img', function() {
    return gulp.src('src/img/**/*.*')
        .pipe(gulp.dest('./build/img'))
        .pipe(browserSync.stream());
});


// Clean folder "Build"
gulp.task('clean:build', function() {
    return del('./build');
});







// Static server (using LESS)
// gulp.task('server', gulp.series('less', function() {
//     browserSync.init({
//         server: {baseDir: "./src/"}
//     });
//     gulp.watch('src/**/*.html').on('change', browserSync.reload);
// 	gulp.watch('src/less/*.less', gulp.series('less'));
// 	gulp.watch('src/**/*.js').on('change', browserSync.reload);
// }));


// Static server (using SCSS)
gulp.task('server', function() {
    browserSync.init({
        server: {baseDir: "./build/"}
    });
   
    gulp.watch('src/pug/**/*.*', gulp.series('pug'));
   
    //gulp.watch('src/**/*.less', gulp.series('less'));
    gulp.watch('src/scss/*.scss', gulp.series('scss'));
    
    gulp.watch('src/**/*.js', gulp.series('copy:js')); 
    gulp.watch('src/libs/**/*.*', gulp.series('copy:libs')); 
    gulp.watch('src/img/**/*.*', gulp.series('copy:img'));     

});







// Default command - gulp to start project
gulp.task('default', gulp.series('server', function(callback){
    runSequence(
        'clean:build',
        ['scss', 'pug', 'copy:js', 'copy:libs', 'copy:img'],
        'server',
        callback
    )
}));

Comments

[Рома Зварич]

Приложите пожалуйста скриншоты консоли: какую команду Вы вводите и какую ошибку выдаёт

[Andrew]

ctrl+r нажимали?

[Кирилл]

Рома Зварич, команда gulp, ошибок в консоли нет

[Кирилл]

Andrew, да нажимал, все равно cannot get/. gulp обновился, я думаю проблема в коде

Answer 1

[Рома Зварич]

Браузер выдает: Cannot GET /. Что нужно исправить, чтобы сборка заработала?

У Вас сервер запускается в папке build/
В папке build должен быть файл index.html, чтобы было что отображать

Судя по задаче под названием pug, файлы .html копируются в эту папку после компиляции PUG-файлов из папки src/pug/pages. Для проверки можете вручную в папку build забросить файл index.html

UPD:
нужно обновить плагин на gulp4-run-sequence. И изменить последнию функцию на:

gulp.task('default', function(callback){
runSequence(
'clean:build',
['scss', 'pug', 'copy:js', 'copy:libs', 'copy:img'],
'server',
callback
)
});

Comments

[Кирилл]

Спасибо, теперь такой ошибки не выдает.
Но, проблема осталась. У меня файлы из папки src не переносятся в папку build, поэтому страница отображается пустой.
Пример: файл index.pug который должен по идеи переписыватсья в index.html не работает

[Рома Зварич]

Кирилл, ну забросьте архив проекта куда-то на fex.net, чтобы можно было понять, что там творится и почему не работает. Трудно наугад сказать, почему не переносится

[Рома Зварич]

Кирилл, попробуйте завершить работу сервера и перезапустить сервер командой "gulp"
У меня pug компилируется и переносится

[Кирилл]

Рома Зварич, https://yadi.sk/d/1zUVAiLkfLTqow

[Кирилл]

Рома Зварич, такое чувство как будто не видет команд, даже элементарно папку build не создает, хотя раньше это делал автоматически, если я писал gulp
Я прислал файл там все есть, кроме node modules

[Рома Зварич]

Кирилл, У меня всё работает.
И "build" создаёт и другие файлы
Что-то вы неправильно делаете.
Попробуйте удалить папку node_modules и установить все пакеты заново

Скриншот с подтверждением

[Кирилл]

Рома Зварич, я понял в чем проблема:
const runSequence = require('gulp4-run-sequence');
а у меня стояла старая версия: gulp-sequence. Я установил новую и все заработало.

[Рома Зварич]

Кирилл, если ответ помог, можете пометить его решением

[Кирилл]

Рома Зварич, укажите ответ, что нужно обновить плагин на gulp4-run-sequence. И изменить последнию функцию на:
gulp.task('default', function(callback){
runSequence(
'clean:build',
['scss', 'pug', 'copy:js', 'copy:libs', 'copy:img'],
'server',
callback
)
});
И я поставлю это как решение.

[Рома Зварич]

Кирилл, обновил