@Seryoga96
Начинающий Front End Developer

В чем проблема: Gulp, Pug, NPM?

Помогите пожалуйста!
Использую Gulp
Пример Gulpfile

"use strict ";

let gulp          = require('gulp'),
		autoprefixer  = require('gulp-autoprefixer'),
		babel         = require('gulp-babel'),
		uglify        = require('gulp-uglify'),
		sass          = require('gulp-sass'),
		sourcemaps    = require('gulp-sourcemaps'),
		concat        = require('gulp-concat'),
		rename        = require('gulp-rename'),
		del           = require('del'),
		cssmin        = require('gulp-clean-css'),
		imagemin      = require('gulp-imagemin'),
		pngquant      = require('imagemin-pngquant'),
		browserSync   = require('browser-sync'),
		jshint        = require('gulp-jshint'),
		plumber       = require('gulp-plumber'),
		pug           = require('gulp-pug'),
		pugLinter     = require('gulp-pug-linter'),
		htmlValidator = require('gulp-w3c-html-validator'),
		bemValidator  = require('gulp-html-bem-validator');

gulp.task('clean', function () {
	del.sync('build/*');
});

const myReporter = (errors) => {
	errors.map(error => console.error(error.message));
};

gulp.task('pug', function buildpug() {
	return gulp.src('src/**/*.pug')
		.pipe(plumber())
		.pipe(pugLinter({ reporter: myReporter }))
		.pipe(pug({
			pretty: true
		}))
		.pipe(htmlValidator())
		.pipe(bemValidator())
		.pipe(gulp.dest('build/'))
		.pipe(browserSync.reload({ stream: true }));
});

gulp.task('libJS', function () {
	return gulp.src([
		'node_modules/jquery/dist/jquery.min.js',
		'node_modules/slick-carousel/slick/slick.min.js',
	])
		.pipe(plumber())
		.pipe(concat('lib.js'))
		.pipe(sourcemaps.init())
		.pipe(babel({
			presets: ['@babel/env']
		}))
		.pipe(sourcemaps.write())
		.pipe(rename({ suffix: '.min' }))
		.pipe(gulp.dest('build/js/lib/'))
		.pipe(browserSync.reload({ stream: true }));
});

gulp.task('js', function () {
	return gulp.src('src/js/**/*.js')
		.pipe(plumber())
		.pipe(jshint())
		.pipe(jshint.reporter('default'))
		.pipe(sourcemaps.init())
		.pipe(babel({
			presets: ['@babel/env']
		}))
		.pipe(uglify())
		.pipe(sourcemaps.write())
		.pipe(rename({ suffix: '.min' }))
		.pipe(gulp.dest('build/js/script/'))
		.pipe(browserSync.reload({ stream: true }));
});

gulp.task('libCSS', function () {
	return gulp.src([
		'node_modules/reset-css/reset.css',
		'node_modules/slick-carousel/slick/slick.css',
		'node_modules/animate.css/animate.min.css',
	])
		.pipe(plumber())
		.pipe(concat('lib.css'))
		.pipe(sourcemaps.init())
		.pipe(cssmin())
		.pipe(sourcemaps.write())
		.pipe(rename({ suffix: '.min' }))
		.pipe(gulp.dest('build/css/lib'))
		.pipe(browserSync.reload({ stream: true }));
});

gulp.task('sass', function () {
	return gulp.src('src/sass/**/*.sass')
		.pipe(plumber())
		.pipe(sourcemaps.init())
		.pipe(sass({ outputStyle: 'compressed' }).on('error', sass.logError))
		.pipe(autoprefixer({
			browsers: ['last 8 versions'],
			overrideBrowserslist: ['last 2 versions'],
			cascade: false
		}))
		.pipe(sourcemaps.write())
		.pipe(rename({ suffix: '.min' }))
		.pipe(gulp.dest('build/css/style'))
		.pipe(browserSync.reload({ stream: true }));
});

gulp.task('image', function () {
	return gulp.src('src/images/**/*.{jpg,jpeg,png,svg,gif}')
		.pipe(imagemin({
				progressive: true,
				use: [pngquant()],
				interlaced: true
		}))
		.pipe(gulp.dest('build/images'))
		.pipe(browserSync.reload({ stream: true }));
});

gulp.task('fonts', function() {
	return gulp.src('src/fonts/**/*.*')
		.pipe(gulp.dest('build/fonts'));
});

gulp.task('watch', function(){
	gulp.watch('src/**/*.pug', gulp.parallel('pug'));
	gulp.watch('src/sass/**/*.sass', gulp.parallel('sass'));
	gulp.watch('src/js/**/*.js', gulp.parallel('js'));
	gulp.watch('src/images/**/*.{jpg,jpeg,png,svg,gif}', gulp.parallel('image'));
	gulp.watch('src/fonts/**/*.*', gulp.parallel('fonts'));
});

gulp.task('browser-sync', function () {
	browserSync.init({
		server: {
			baseDir: "build"
		},
		// tunnel: true,
		host: 'localhost',
		port: 1096,
		logPrefix: "Frontend_Segey"
	});
});

gulp.task('build', gulp.series('clean'));
gulp.task('default', gulp.parallel('build', 'pug', 'sass', 'fonts', 'image', 'libCSS', 'libJS', 'js', 'browser-sync', 'watch'));


Завел Gulp, пример ошибки залил на Codepen
Ошибка
index.pug
nav.pug
5e5d4f2d87dd5342073036.png

footer.pug
5e5d4f3e7a887026188147.png


Проект на GitHub

Ещё когда в footer.pug делаю подключение nav.pug оно не работает. А сам footer.pug подключаю в index.pug.
Как решить?
  • Вопрос задан
  • 144 просмотра
Решения вопроса 1

[19:58:07] HTML Error: index.html Line 7, Column 130: Bad value “https:// fonts.googleapis.com/css?family=Lato:300,400,700,900|Rubik:400,500,700&display=swap” for attribute “href” on element “link”: Illegal character in query: “|” is not allowed.

Все написано
Решение тут
https://stackoverflow.com/questions/22466913/googl...
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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