Answer the question
In order to leave comments, you need to log in
Infinite gulp error in console?
I post a video of the problem.
started suddenly. Reinstalling the entire package.json - did not help
after the error occurred, the console and the server hang, the working editor remains.
https://www.youtube.com/watch?v=WNDDy2UzejM
let projectFolder = 'dist';
let sourceFolder = 'source';
let fs = require('fs');
let path = {
build: {
html: projectFolder + '/',
css: projectFolder + '/css/',
js: projectFolder + '/js/',
img: projectFolder + '/img/',
fonts: projectFolder + '/fonts/',
video: projectFolder + '/video/'
},
source: {
html: [sourceFolder + '/*.html', '!' + sourceFolder + '/_*.html'],
css: sourceFolder + '/scss/style.scss',
js: sourceFolder + '/js/script.js',
img: sourceFolder + '/img/**/*.{jpg,png,svg,gif,ico,webp}',
fonts: sourceFolder + '/fonts/*.ttf',
video: sourceFolder + '/video/**/*'
},
watch: {
html: sourceFolder + '/**/*.html',
css: sourceFolder + '/scss/**/*.scss',
js: sourceFolder + '/js/**/*.js',
img: sourceFolder + '/img/**/*.{jpg,png,svg,gif,ico,webp}',
},
clean: './' + projectFolder + '/'
}
let { src, dest } = require('gulp'),
gulp = require('gulp'),
browserSync = require('browser-sync').create(),
fileInclude = require('gulp-file-include'),
del = require('del'),
scss = require('gulp-sass'),
autoprefixer = require('gulp-autoprefixer'),
group_media = require('gulp-group-css-media-queries'),
clean_css = require('gulp-clean-css'),
rename = require('gulp-rename'),
uglify = require('gulp-uglify-es').default,
imagemin = require('gulp-imagemin'),
// webp = require('gulp-webp'),
// webphtml = require('gulp-webp-html'),
// webpcss = require('gulp-webpcss'),
ttf2woff = require('gulp-ttf2woff'),
ttf2woff2 = require('gulp-ttf2woff2'),
fonter = require('gulp-fonter');
// Удаляет лишние файлы из 'dist'
function deleteFolderDist(arg) {
return del(path.clean)
}
function synchro(arg) {
browserSync.init({
server: {
baseDir: './' + projectFolder + '/'
},
online: true,
port: 3000,
notify: false,
})
}
function html(arg) {
return src(path.source.html)
.pipe(fileInclude())
// .pipe(webphtml())
.pipe(dest(path.build.html))
.pipe(browserSync.stream())
}
function video(arg) {
return src(path.source.video)
.pipe(dest(path.build.video))
.pipe(browserSync.stream())
}
function css(arg) {
return src(path.source.css)
.pipe(
scss({
outputStyle: 'expanded'
}))
.pipe(group_media())
.pipe(autoprefixer({
overrideBrowserslist: ['last 5 versions'],
cascade: true
}))
// .pipe(webpcss())
.pipe(dest(path.build.css))
.pipe(clean_css())
.pipe(rename({
extname: '.min.css'
}))
.pipe(dest(path.build.css))
.pipe(browserSync.stream())
}
function js(arg) {
return src(path.source.js)
.pipe(fileInclude())
.pipe(dest(path.build.js))
.pipe(uglify())
.pipe(rename({
extname: '.min.js'
}))
.pipe(dest(path.build.js))
.pipe(browserSync.stream())
}
function images(arg) {
return src(path.source.img)
// .pipe(
// webp({
// quality: 70
// })
// )
.pipe(dest(path.build.img))
.pipe(src(path.source.img))
.pipe(
imagemin({
interlaced: true,
progressive: true,
optimizationLevel: 3,
svgoPlugins: [
{
removeViewBox: true
}
]
}))
.pipe(dest(path.build.img))
.pipe(browserSync.stream())
}
function livefonts() {
src(path.source.fonts)
.pipe(ttf2woff())
.pipe(dest(path.build.fonts));
return src(path.source.fonts)
.pipe(ttf2woff2())
.pipe(dest(path.build.fonts))
}
gulp.task('otf', function () {
return src([sourceFolder + '/fonts/*.otf'])
.pipe(fonter({
formats: ['ttf']
}))
.pipe(dest(sourceFolder + '/fonts/'))
})
function fontsStyle(params) {
let file_content = fs.readFileSync(sourceFolder + '/scss/fonts.scss');
if (file_content == '') {
fs.writeFile(sourceFolder + '/scss/fonts.scss', '', cb);
return fs.readdir(path.build.fonts, function (err, items) {
if (items) {
let c_fontname;
for (var i = 0; i < items.length; i++) {
let fontname = items[i].split('.');
fontname = fontname[0];
if (c_fontname != fontname) {
fs.appendFile(sourceFolder + '/scss/fonts.scss', '@include font("' + fontname + '", "' + fontname + '", "400", "normal");\r\n', cb);
}
c_fontname = fontname;
}
}
})
}
}
function cb() { }
// Следим за файлами
function watchFiles(params) {
gulp.watch([path.watch.html], html),
gulp.watch([path.watch.css], css),
gulp.watch([path.watch.js], js)
gulp.watch([path.watch.img], images)
}
let build = gulp.series(deleteFolderDist, gulp.parallel(js, css, html, images, livefonts,video), fontsStyle)
let watch = gulp.parallel(build, watchFiles, synchro);
exports.fontsStyle = fontsStyle;
exports.livefonts = livefonts;
exports.images = images;
exports.js = js;
exports.video = video;
exports.css = scss;
exports.build = build;
exports.html = html;
exports.watch = watch;
exports.default = watch;
{
"name": "fls-gulp",
"version": "1.0.0",
"description": "первая сборка галпа",
"main": "index.html",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "DangerEnemy",
"license": "ISC",
"devDependencies": {
"browser-sync": "^2.26.12",
"del": "^5.1.0",
"gulp": "^4.0.2",
"gulp-autoprefixer": "^7.0.1",
"gulp-clean-css": "^4.3.0",
"gulp-file-include": "^2.2.2",
"gulp-fonter": "^0.3.0",
"gulp-group-css-media-queries": "^1.2.2",
"gulp-imagemin": "^7.1.0",
"gulp-rename": "^2.0.0",
"gulp-sass": "^4.1.0",
"gulp-svg-sprite": "^1.5.0",
"gulp-ttf2woff": "^1.1.1",
"gulp-ttf2woff2": "^3.0.0",
"gulp-uglify-es": "^2.0.0",
"gulp-webp": "^4.0.1",
"gulp-webp-html": "^1.0.2",
"gulp-webpcss": "^1.1.1"
}
}
Answer the question
In order to leave comments, you need to log in
the error occurs due to a .gif file that is apparently crookedly converted or something else is wrong with it. After deleting the gif, everything worked.
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question