主页 / 问题 / 925511
Accepted
corocoto
Asked:2020-12-26 05:48:34 +0000 UTC2020-12-26 05:48:34 +0000 UTC

gulp 4中的任务执行问题

  • 772

最近发现gulp已经完全从版本3切换到了4。我决定试试新版本的新特性，但是调用watch和build任务的时候出现了问题。

给出以下错误：“以下任务未完成您是否忘记发出异步完成信号？”

编码：

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'));
javascript

1 个回答

  1. Best Answer

    我又摆弄了一下，它奏效了

    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'));
    • 0

相关问题