Answer the question
In order to leave comments, you need to log in
Problem with project build setup?
Good afternoon.
There was such a problem: I watched the lessons on building the project, but they came out plus or minus a year ago, as I understand it, a lot has changed in gulp 4 and the code that I wrote does not work.
The browser issues: Cannot GET /. What needs to be fixed in order for the build to work?
// Подключение пакетов
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
)
}));
Answer the question
In order to leave comments, you need to log in
The browser issues: Cannot GET /. What needs to be fixed in order for the build to work?
build/
build
must contain a file index.html
to have something to display pug
, the files are .html
copied to this folder after compiling the PUG files from the src/pug/pages
. To check, you can manually upload the UPDbuild
file to the folder:
you need to update the plugin to gulp4-run-sequence. And change the last function to:index.html
gulp.task('default', function(callback){
runSequence(
'clean:build',
['scss', 'pug', 'copy:js', 'copy:libs', 'copy:img'],
'server',
callback
)
});
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question