Проблема с выполнением task в gulp 4

125

05 июля 2019, 15:30

Недавно узнал, что gulp полностью перешел с 3 версии на 4. Решил попробовать новую версию с ее новыми возможностями, но тут возникли проблемы при вызове тасков watch и build.

Выдает следующую ошибку: "The following tasks did not complete Did you forget to signal async completion?"

Код:

var gulp = require('gulp'),
uglify = require('gulp-uglifyjs'),
autoprefixer = require('gulp-autoprefixer'),
del = require('del'),
cssnano = require('gulp-cssnano'),
rename = require('gulp-rename'),
imagemin = require('gulp-imagemin'),
pngquant = require('imagemin-pngquant'),
cache = require('gulp-cache');

//добавление префикса и минифицирование css файла
   gulp.task('styles', function() {
   return gulp.src('src/css/style.css')
    .pipe(autoprefixer(['last 15 versions', '> 1%', 'ie 8', 'ie 7'], {
      cascade: true /*для читабельности кода*/
    })) //автоматическое добавление префиксов
    .pipe(cssnano())
    .pipe(rename({
      suffix: '.min'
    }))
    .pipe(gulp.dest('src/css'));
});
/*сжатие js файлов*/
gulp.task('scripts', function() {
  return gulp.src('src/js/*.js')
    .pipe(uglify())
    .pipe(gulp.dest('src/js/min'));
});
//удаление директории
gulp.task('clean', function() {
  return del.sync('dist');
});
//очистка кэша
gulp.task('clear-cache', function() {
  return cache.clearAll();
});
//сжатие изображений
gulp.task('img', function() {
  return gulp.src('src/img/**/*')
    .pipe(cache(imagemin({
      interlaced: true,
      progressive: true,
      svgoPlugins: [{
        removeViewBox: false
      }],
      une: [pngquant()]
    })))
    .pipe(gulp.dest('dist/img'));
});
gulp.task('watch', function() {
  gulp.watch('src/css/style.css', gulp.parallel('styles'));
  gulp.watch('src/js/*.js', gulp.parallel('scripts'));
});
gulp.task('build', gulp.series('clean', 'img', 'styles', 'scripts'), function() {
  var buildCss = gulp.src(['src/css/style.min.css'])
    .pipe(gulp.dest('dist/css'));
  var buildJs = gulp.src('src/js/min/*.js')
    .pipe(gulp.dest('dist/js'));
  var buildHtml = gulp.src('src/*.html')
    .pipe(gulp.dest('dist'));
  var buildHtmlPages = gulp.src('src/pages/*.html')
    .pipe(gulp.dest('dist/pages'));
  var buildAudio = gulp.src('src/audio/**/*')
    .pipe(gulp.dest('dist/audio'));
});
gulp.task('default', gulp.parallel('watch','styles ','scripts'));

Answer 1

Поковырялся еще немного и все заработало

var gulp         = require('gulp'),
    uglify       = require('gulp-uglifyjs'),
    autoprefixer = require('gulp-autoprefixer'),
    del          = require('del'),
    cssnano      = require('gulp-cssnano'),
    rename       = require('gulp-rename'),
    imagemin     = require('gulp-imagemin'),
    pngquant     = require('imagemin-pngquant'),
    cache        = require('gulp-cache');

var toDelete = [
    'dist'
]
var jsFiles = [
    'src/js/oneplayer.js',
    'src/js/twoplayers.js',
    'src/js/menu.js'
]
var cssFiles = [
    'src/css/style.css'
]
var imgFiles =[
    'src/img/**/*'
]
var buildCss = [
    'src/css/style.min.css'
]
var buildJs =[
    'src/js/oneplayer.min.js',
    'src/js/twoplayers.min.js',
    'src/js/menu.min.js'
]
var buildHtml = [
    'src/pages/**/*'
]
var buildAudio = [
    'src/audio/**/*'
]

gulp.task('styles', function() {
    var stream = gulp.src(cssFiles)
        .pipe(autoprefixer(['last 15 versions', '> 1%', 'ie 8', 'ie 7'], {cascade: true }))
        .pipe(cssnano())
        .pipe(rename({ suffix: '.min' }))
        .pipe(gulp.dest('src/css'));
    return stream;
});
gulp.task ('clean', function() {
    return del(toDelete);
});
gulp.task('scripts', function() {
    for (var i=0; i<jsFiles.length; i++) {
        var stream = gulp.src(jsFiles[i])
            .pipe(rename({suffix: '.min'}))
            .pipe(uglify())
            .pipe(gulp.dest('src/js'));
    }
        return stream;
});
gulp.task ('clearcache', function() {
    return cache.clearAll();
});
gulp.task ('img', function() {
    var stream = gulp.src(imgFiles)
        .pipe(cache(imagemin({
            interlaced: true,
            progressive: true,
            svgoPlugins: [{removeViewBox: false}],
            une: [pngquant()]
        })))
        .pipe(gulp.dest('dist/img'));
    return stream;
});
gulp.task('build', function () {
    var buildStyles = gulp.src(buildCss)
        .pipe(gulp.dest('dist/css'));
    var buildScripts = gulp.src(buildJs)
        .pipe(gulp.dest('dist/js'));
    var buildHTML = gulp.src(buildHtml)
        .pipe(gulp.dest('dist/pages'));
    var index = gulp.src('src/*.html')
        .pipe(gulp.dest('dist'));
    var buildSounds = gulp.src(buildAudio)
        .pipe (gulp.dest('dist/audio'));
    return buildStyles,buildScripts,buildHTML,index,buildSounds;
});
gulp.watch(cssFiles, gulp.parallel('styles'));
gulp.watch(jsFiles, gulp.parallel('scripts'));
gulp.watch(imgFiles, gulp.series('img', 'clearcache'));
gulp.task('serve', gulp.series('clean',
    gulp.parallel(
        'styles',
        'scripts',
        'img')));
gulp.task('default', gulp.series('serve', 'clearcache', 'build'));