将gulp从3升级到4-必须指定任务功能错误-怎么办？

我有一个简单的javascript网页，并使用了Gulp3。现在（据我所知）节点10与Gulp3崩溃，因此我升级到Gulp4。我对gulp的了解非常有限，现在正在阅读关于如何升级的教程，但仍然遇到错误：必须指定任务函数

任何帮助都会很好。谢谢

    var gulp = require('gulp');
    var sass = require('gulp-sass');
    var browserSync = require('browser-sync').create();
    var cleanCSS = require('gulp-clean-css');
    var rename = require("gulp-rename");
    var uglify = require('gulp-uglify');
    var cache = require('gulp-cache');
    var imagemin = require('gulp-imagemin');

    // Compiles SCSS files from /scss into /css
    gulp.task('sass', function (done) {
        gulp.src('app/scss/styles.scss')
            .pipe(sass())
            .pipe(gulp.dest('css'))
            .pipe(browserSync.reload({
                stream: true
            }))
        done()
    });

    // Minify compiled CSS
    gulp.task('minify-css', ['sass'], function (done) {
         gulp.src('app/css/styles.css')
            .pipe(cleanCSS({
                compatibility: 'ie8'
            }))
            .pipe(rename({
                suffix: '.min'
            }))
            .pipe(gulp.dest('css'))
            .pipe(browserSync.reload({
                stream: true
            }))
        done()
    });

    // Minify custom JS
    gulp.task('minify-js', function (done) {
        gulp.src('app/js/index.js')
            .pipe(uglify())
            .pipe(rename({
                suffix: '.min'
            }))
            .pipe(gulp.dest('js'))
            .pipe(browserSync.reload({
                stream: true
            }))
        done()
    });

    // Copy vendor files from /node_modules into /vendor

    gulp.task('copy', function (done) {
        gulp.src([
            'node_modules/bootstrap/dist/**/*',
            '!**/npm.js',
            '!**/bootstrap-theme.*',
            '!**/*.map'
        ])
            .pipe(gulp.dest('vendor/bootstrap'))

        gulp.src(['node_modules/jquery/dist/jquery.js', 'node_modules/jquery/dist/jquery.min.js'])
            .pipe(gulp.dest('vendor/jquery'))

        gulp.src(['node_modules/jquery-easing/*.js'])
            .pipe(gulp.dest('vendor/jquery-easing'))

        /*gulp.src(['node_modules/waypoints/lib/jquery.waypoints.js'])
            .pipe(gulp.dest('vendor/waypoint'))*/
        gulp.src(['node_modules/animate.css/animate.css'])
            .pipe(gulp.dest('vendor/animate'))
        /*    gulp.src(['node_modules/scrollreveal/dist/scrollreveal.js'])
                .pipe(gulp.dest('vendor/scrollreveal'))*/
        done()
    })

    // Optimizing Images
    gulp.task('images', function(done) {
        gulp.src('app/images/**/*.+(png|jpg|jpeg|gif|svg)')
        // Caching images that ran through imagemin
            .pipe(cache(imagemin({
                interlaced: true,
            })))
            .pipe(gulp.dest('dist/images'));
        done()
    });


    // Default task
    /*gulp.task('default', ['sass', 'minify-css', 'minify-js', 'copy']);*/
    gulp.task('default', gulp.series('sass', 'minify-css', 'minify-js', 'copy'));

    // Configure the browserSync task
    gulp.task('browserSync', function (done) {
        browserSync.init({
            server: {
                baseDir: ''
            },
            port: process.env.PORT || 8080
        });
        done()
    })

    // Dev task with browserSync
    //old:
   /*
    gulp.task('dev', ['browserSync', 'sass', 'minify-css', 'minify-js', 'images'], function () {
        gulp.watch('scss/!*.scss', ['sass']);
        gulp.watch('css/!*.css', ['minify-css']);
        gulp.watch('js/!*.js', ['minify-js']);
        // Reloads the browser whenever HTML or JS files change
        gulp.watch('*.html', browserSync.reload);
        gulp.watch('js/!**!/!*.js', browserSync.reload);
    });*/

   //new
    gulp.task('watch', function(){
        gulp.watch('app/scss/*.scss')
            .on('change', function(path, stats) {
                console.log('File ' + path + ' was changed');
            }).on('unlink', function(path) {
            console.log('File ' + path + ' was removed');
        });
    });

---

转换为gulp 4时，所有任务阵列：

gulp.task（'minify-css'，['sass']，函数（完成）{

应使用以下系列：

gulp.task（'minify-css'，gulp.series（'sass'，函数（完成）{

最终文件：

var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync').create();
var cleanCSS = require('gulp-clean-css');
var rename = require("gulp-rename");
var uglify = require('gulp-uglify');
var cache = require('gulp-cache');
var imagemin = require('gulp-imagemin');

// Compiles SCSS files from /scss into /css
gulp.task('sass', function (done) {
    gulp.src('app/scss/styles.scss')
        .pipe(sass())
        .pipe(gulp.dest('css'))
        .pipe(browserSync.reload({
            stream: true
        }))
    done()
});

// Minify compiled CSS
gulp.task('minify-css', gulp.series('sass', function (done) {
    gulp.src('app/css/styles.css')
        .pipe(cleanCSS({
            compatibility: 'ie8'
        }))
        .pipe(rename({
            suffix: '.min'
        }))
        .pipe(gulp.dest('css'))
        .pipe(browserSync.reload({
            stream: true
        }))
    done()
}));

// Minify custom JS
gulp.task('minify-js', function (done) {
    gulp.src('app/js/index.js')
        .pipe(uglify())
        .pipe(rename({
            suffix: '.min'
        }))
        .pipe(gulp.dest('js'))
        .pipe(browserSync.reload({
            stream: true
        }))
    done()
});

// Copy vendor files from /node_modules into /vendor

gulp.task('copy', function (done) {
    gulp.src([
        'node_modules/bootstrap/dist/**/*',
        '!**/npm.js',
        '!**/bootstrap-theme.*',
        '!**/*.map'
    ])
        .pipe(gulp.dest('vendor/bootstrap'))

    gulp.src(['node_modules/jquery/dist/jquery.js', 'node_modules/jquery/dist/jquery.min.js'])
        .pipe(gulp.dest('vendor/jquery'))

    gulp.src(['node_modules/jquery-easing/*.js'])
        .pipe(gulp.dest('vendor/jquery-easing'))

    /*gulp.src(['node_modules/waypoints/lib/jquery.waypoints.js'])
        .pipe(gulp.dest('vendor/waypoint'))*/
    gulp.src(['node_modules/animate.css/animate.css'])
        .pipe(gulp.dest('vendor/animate'))
    /*    gulp.src(['node_modules/scrollreveal/dist/scrollreveal.js'])
            .pipe(gulp.dest('vendor/scrollreveal'))*/
    done()
})

// Optimizing Images
gulp.task('images', function(done) {
    gulp.src('app/images/**/*.+(png|jpg|jpeg|gif|svg)')
    // Caching images that ran through imagemin
        .pipe(cache(imagemin({
            interlaced: true,
        })))
        .pipe(gulp.dest('dist/images'));
    done()
});


// Default task
/*gulp.task('default', ['sass', 'minify-css', 'minify-js', 'copy']);*/
gulp.task('default', gulp.series('sass', 'minify-css', 'minify-js', 'copy'));

// Configure the browserSync task
gulp.task('browserSync', function (done) {
    browserSync.init({
        server: {
            baseDir: ''
        },
        port: process.env.PORT || 8080
    });
    done()
})

// Dev task with browserSync
//old:
/*
 gulp.task('dev', ['browserSync', 'sass', 'minify-css', 'minify-js', 'images'], function () {
     gulp.watch('scss/!*.scss', ['sass']);
     gulp.watch('css/!*.css', ['minify-css']);
     gulp.watch('js/!*.js', ['minify-js']);
     // Reloads the browser whenever HTML or JS files change
     gulp.watch('*.html', browserSync.reload);
     gulp.watch('js/!**!/!*.js', browserSync.reload);
 });*/

//new
gulp.task('watch', function(){
    gulp.watch('app/scss/*.scss')
        .on('change', function(path, stats) {
            console.log('File ' + path + ' was changed');
        }).on('unlink', function(path) {
        console.log('File ' + path + ' was removed');
    });
});

监视任务：

gulp.task('watch', function (done) {
    gulp.watch('scss/*.scss', gulp.series('sass'));
    gulp.watch('css/!*.css', gulp.series('minify-css'));
    gulp.watch('js/!*.js', gulp.series('minify-js'));
    // Reloads the browser whenever HTML or JS files change
    gulp.watch('*.html', browserSync.reload);
    gulp.watch('js/!**/!*.js', browserSync.reload);
    return
});

---

转换为gulp 4时，所有任务阵列：

gulp.task（'minify-css'，['sass']，函数（完成）{

应使用以下系列：

gulp.task（'minify-css'，gulp.series（'sass'，函数（完成）{

最终文件：

var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync').create();
var cleanCSS = require('gulp-clean-css');
var rename = require("gulp-rename");
var uglify = require('gulp-uglify');
var cache = require('gulp-cache');
var imagemin = require('gulp-imagemin');

// Compiles SCSS files from /scss into /css
gulp.task('sass', function (done) {
    gulp.src('app/scss/styles.scss')
        .pipe(sass())
        .pipe(gulp.dest('css'))
        .pipe(browserSync.reload({
            stream: true
        }))
    done()
});

// Minify compiled CSS
gulp.task('minify-css', gulp.series('sass', function (done) {
    gulp.src('app/css/styles.css')
        .pipe(cleanCSS({
            compatibility: 'ie8'
        }))
        .pipe(rename({
            suffix: '.min'
        }))
        .pipe(gulp.dest('css'))
        .pipe(browserSync.reload({
            stream: true
        }))
    done()
}));

// Minify custom JS
gulp.task('minify-js', function (done) {
    gulp.src('app/js/index.js')
        .pipe(uglify())
        .pipe(rename({
            suffix: '.min'
        }))
        .pipe(gulp.dest('js'))
        .pipe(browserSync.reload({
            stream: true
        }))
    done()
});

// Copy vendor files from /node_modules into /vendor

gulp.task('copy', function (done) {
    gulp.src([
        'node_modules/bootstrap/dist/**/*',
        '!**/npm.js',
        '!**/bootstrap-theme.*',
        '!**/*.map'
    ])
        .pipe(gulp.dest('vendor/bootstrap'))

    gulp.src(['node_modules/jquery/dist/jquery.js', 'node_modules/jquery/dist/jquery.min.js'])
        .pipe(gulp.dest('vendor/jquery'))

    gulp.src(['node_modules/jquery-easing/*.js'])
        .pipe(gulp.dest('vendor/jquery-easing'))

    /*gulp.src(['node_modules/waypoints/lib/jquery.waypoints.js'])
        .pipe(gulp.dest('vendor/waypoint'))*/
    gulp.src(['node_modules/animate.css/animate.css'])
        .pipe(gulp.dest('vendor/animate'))
    /*    gulp.src(['node_modules/scrollreveal/dist/scrollreveal.js'])
            .pipe(gulp.dest('vendor/scrollreveal'))*/
    done()
})

// Optimizing Images
gulp.task('images', function(done) {
    gulp.src('app/images/**/*.+(png|jpg|jpeg|gif|svg)')
    // Caching images that ran through imagemin
        .pipe(cache(imagemin({
            interlaced: true,
        })))
        .pipe(gulp.dest('dist/images'));
    done()
});


// Default task
/*gulp.task('default', ['sass', 'minify-css', 'minify-js', 'copy']);*/
gulp.task('default', gulp.series('sass', 'minify-css', 'minify-js', 'copy'));

// Configure the browserSync task
gulp.task('browserSync', function (done) {
    browserSync.init({
        server: {
            baseDir: ''
        },
        port: process.env.PORT || 8080
    });
    done()
})

// Dev task with browserSync
//old:
/*
 gulp.task('dev', ['browserSync', 'sass', 'minify-css', 'minify-js', 'images'], function () {
     gulp.watch('scss/!*.scss', ['sass']);
     gulp.watch('css/!*.css', ['minify-css']);
     gulp.watch('js/!*.js', ['minify-js']);
     // Reloads the browser whenever HTML or JS files change
     gulp.watch('*.html', browserSync.reload);
     gulp.watch('js/!**!/!*.js', browserSync.reload);
 });*/

//new
gulp.task('watch', function(){
    gulp.watch('app/scss/*.scss')
        .on('change', function(path, stats) {
            console.log('File ' + path + ' was changed');
        }).on('unlink', function(path) {
        console.log('File ' + path + ' was removed');
    });
});

监视任务：

gulp.task('watch', function (done) {
    gulp.watch('scss/*.scss', gulp.series('sass'));
    gulp.watch('css/!*.css', gulp.series('minify-css'));
    gulp.watch('js/!*.js', gulp.series('minify-js'));
    // Reloads the browser whenever HTML or JS files change
    gulp.watch('*.html', browserSync.reload);
    gulp.watch('js/!**/!*.js', browserSync.reload);
    return
});

---

我试着用function代替gulp.task（），它对我很有效

---

我试着用function代替gulp.task（），它对我很有效

---

非常感谢。它现在确实运行了，但没有任何效果。没有显示任何内容，而且我发现关于jquery的奇怪错误没有定义（我使用jquery）或意外标记<（来自我使用的另一个库）。它必须连接到gulp，就像我刚刚打开index.html文件一样（没有使用gulp运行它），一切正常您的新监视任务似乎只监视scss文件，这可能是您提到的问题的原因吗？@javascripting您能提供发生的错误吗？我刚刚编辑了我的问题并添加了我的监视任务（是否像您所说的那样使用gulp.series）未捕获类型错误：无法读取未定义的属性“each”（来自jquery航路点），意外标记<（来自jquery），未定义jquery（来自jquery库），无法读取未定义的属性“fn”（来自类型库）您的监视任务中出现了一个小错误，您能使用上面更新的监视任务吗？@javascriptingThank。它现在运行，但没有任何功能。没有显示任何内容，并且我收到关于jquery的奇怪错误，没有定义（我使用jquery）或意外标记<（来自我使用的另一个库）。它必须连接到gulp，因为当我刚刚打开index.html文件（没有使用gulp运行它）时，一切正常。您的新监视任务似乎只监视scss文件，这可能是您提到的问题的原因吗？@javascripting您能提供发生的错误吗？我刚刚编辑了我的问题并添加了监视任务（像你说的那样使用gulp.series）未捕获类型错误：无法读取未定义的属性“each”（来自jquery航路点），意外标记<（来自jquery），未定义jquery（来自jquery库），无法读取未定义的属性“fn”（来自类型库）您的监视任务有一个小错误，您能使用上面更新的监视任务吗？@javascripting