1

Перешел на новую версию Gulp (v4) и мой галп сборщик превратился в тыкву, Подскажите, как исправить что б работало как прежде?
Мой package.json { "name": "start-page", "version": "3.0.1", "description": "Start page for Andry's projects", "main": "index.js", "scripts": { "test": "gulp" }, "author": "Zirka Andry", "license": "ISC", "devDependencies": { "browser-sync": "^2.26.3", "gulp": "^4.0.0", "gulp-autoprefixer": "^6.0.0", "gulp-clean": "^0.4.0", "gulp-combine-mq": "^0.4.0", "gulp-concat": "^2.6.1", "gulp-csso": "^3.0.1", "gulp-htmlnano": "^0.1.0", "gulp-if": "^2.0.2", "gulp-imagemin": "^5.0.3", "gulp-rename": "^1.4.0", "gulp-sass": "^4.0.2", "gulp-uglify": "^3.0.1", "gulp-useref": "^3.1.6", "gulp.spritesmith": "^6.9.0", "imagemin-pngquant": "^7.0.0", "main-bower-files": "^2.13.1" } }

Собственно мой сборщик gulpfile.js:

/*********************************************/ /DEPENDENCIES/ /*********************************************/

let gulp = require("gulp"),// gulp coreconst // browserSync = require('browser-sync').create(),// inject code to all devices sass = require('gulp-sass'),// sass compiler gulpif = require('gulp-if'),// conditionally run a task clean = require('gulp-clean'),// removing files and folders uglify = require('gulp-uglify'),// uglifies the js concat = require('gulp-concat'), rename = require('gulp-rename'),// rename files useref = require('gulp-useref'),// parse build blocks in HTML files to replace references csso = require('gulp-csso'),// minify the css files cmq = require('gulp-combine-mq'), autoprefixer = require('gulp-autoprefixer'),// sets missing browserprefixes imagemin = require('gulp-imagemin'),// minify images pngquant = require('imagemin-pngquant'),// minify png-format images spritesmith = require('gulp.spritesmith'),// create sprites htmlnano = require('gulp-htmlnano'), options = {removeComments: false};

/*********************************************/ /BROWSERSYNC (LOCAL SERVER)/ /*********************************************/

gulp.task('default', function () { // start server browserSync.init({ server: {baseDir: "./app/"} // base dir }); });

/*********************************************/

function buildSprite() { let spriteData = gulp.src('./app/image/sprite/.') .pipe(spritesmith({ imgName: '../image/sprite.png', cssName: '_sprite.scss', cssFormat: 'scss', padding: 5 }));

spriteData.img.pipe(gulp.dest('./app/image'));
return spriteData.css.pipe(gulp.dest('./app/sass/components'));

}

gulp.task('sprite', function (done) { buildSprite().on('end', done); });

/*********************************************/ /WATCHER (WATCHING FILE CHANGES)/ /*********************************************/

gulp.task('watch', function () { gulp.watch('./app//.html', gulp.parallel('html')); // watching changes in HTML gulp.watch('./app/sass//.scss', gulp.parallel('sass')); // watching changes in SASS gulp.watch('./app/js/**/.js', gulp.parallel('js')); // watching changes in JS gulp.watch('./app/image/sprite/.*', gulp.parallel('sprite')); // watching changes in IMAGES });

/*********************************************/ /HTML TASKS/ /*********************************************/

gulp.task('html', function () { gulp.src('./app/index.html') // get the files .pipe(gulp.dest('./app/')) // where to put the file .pipe(browserSync.stream()); // browsersync stream });

/*********************************************/ /SASS TASKS/ /*********************************************/

gulp.task('sass', gulp.parallel('sprite', function () { gulp.src('./app/sass/**/*') // get the files .pipe(sass().on('error', sass.logError)) // add prefixes .pipe(autoprefixer({ browsers: ['last 7 versions'], cascade: true })) .pipe(cmq()) .pipe(csso()) .pipe(gulp.dest('app/css')) // where to put the file .pipe(browserSync.stream()); // browsersync stream }));

/*********************************************/ /JS TASKS/ /*********************************************/

gulp.task('js', function () { return gulp.src('./app/js/*.js') // get the files .pipe(browserSync.stream()) // browsersync stream });

/*********************************************/ /IMAGES TASKS/ /*********************************************/

gulp.task('images', gulp.parallel('sprite', function () { return gulp.src('./app/image/**/*') // get the files .pipe(imagemin({ // minify images progressive: true, svgoPlugins: [{ removeViewBox: false }, { cleanupIDs: false }], use: [pngquant({ // minify png-format images quality: '50-70', speed: 4 })], interlaced: true

    }))
    .pipe(gulp.dest('dist/image'));                   // where to put the files

}));

/*********************************************/ /FONTS TASKS/ /*********************************************/

gulp.task('fonts', function () { return gulp.src('./app/fonts/**/*') // get the files .pipe(gulp.dest('dist/fonts')); // where to put the files });

/*********************************************/ /LIBS TASKS (PERSONAL DEVELOPER LIBS)/ /*********************************************/

gulp.task('libs', function () { return gulp.src('./app/libs/**/*') // get the files .pipe(gulp.dest('dist/libs')); // where to put the files });

/*********************************************/ /EXTRASS TASKS (ROOT FILES, EXCEPT HTML)/ /*********************************************/

gulp.task('extrass', function () { return gulp.src([ // get the files 'app/.', '!app/*.html' // except '.html' ]).pipe(gulp.dest('dist')); // where to put the files });

/*********************************************/ /BUILD TASKS/ /*********************************************/

gulp.task('clean', function () { return gulp.src('dist', {read: false}) .pipe(clean()); // clean dir });

gulp.task('build', gulp.parallel('clean', function () { gulp.start('images'); // images task gulp.start('fonts'); // fonts task gulp.start('libs'); // libs task gulp.start('extrass'); // extras task

return gulp.src('app/*.html')
    .pipe(gulpif('app/*.js', uglify()))   // uglify js-files
    .pipe(gulpif('app/*.css', csso()))    // minify css-files
    .pipe(useref())
    .pipe(gulp.dest('./dist'));                     // where to put the files

}));

/*********************************************/ /MINIMIZATION JS/ /*********************************************/ gulp.task('jsmin', function () { gulp.src(['./app/js/*.js']) .pipe(concat('common.js')) .pipe(uglify()) .pipe(rename("./common-xmin.js")) .pipe(gulp.dest('app/js')); }); // /*********************************************/ // /MINIMIZATION HTML/ // /*********************************************/ gulp.task('htmlmin', function () { return gulp .src('dist/*.html') .pipe(htmlnano(options)) .pipe(gulp.dest('./dist')); });

Не могу понять почему, всё ломается на функции buildSprite() ? Что разработчики так глобально поменяли, что оно перестало работать.Вот документация к плагину но её прочтения, что-то мне совершенно не помогает.

2
  • Я пользуюсь Grunt, не Gulp, но: // 1. Уверен, что в Gulp тоже возможно запускать задачи по отдельности. Пожалуйста, создайте MCVE, оставив в Gulpfile только проблемный код. // 2. Уверен, что в Gulp есть что-то вроде --debug и --verbose. Какие именно ошибки Вы получаете? 6 фев 2019 в 10:45
  • // 3. Вероятно, Gulpfile также можно сделать более удобным, разложив задачи по файлам и убрав over 9000 require (пример). // Возможно, поэтому с этим вопросом и не помогают Вам. Спасибо. 6 фев 2019 в 10:45

1 ответ 1

0

Перенесите задачу buildSprite() наверх, после default задачи. Туда же, после buildSprite, перенесите и sprite задачу. Ошибка возникает потому что задачи, описанные выше, вызываются ранее, чем они объявляются.

3
  • Поменял, только это всё ещё не помогло. Выбрасывает ошибку на функции clean при запуске gulp build 9 фев 2019 в 9:52
  • @BlackStar1991 gulp.start устарел и в gulp4 уже не используется, вместо него gulp.parallel Попробуйте переписать таску build. Еще я бы посоветовал вынести отдельно uglify и minify в какую нибудь отдельную задачу 11 фев 2019 в 10:45
  • Уточню на всякий случай: gulp.task('build', gulp.parallel('clean', function () { gulp.start('images'); // images task gulp.start('fonts'); // fonts task ... лучше переписать так: gulp.task('build', gulp.series('clean', gulp.parallel('images', 'fonts', 'libs' ... ))); 11 фев 2019 в 12:19

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.