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

Question

我有一个简单的 javascript 网页并使用了 gulp 3。现在（据我所知）节点 10 因 gulp 3 崩溃所以我升级到 gulp 4. 我对 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');
        });
    });

Answer 1

转换为gulp4时，所有Task数组：

gulp.task('minify-css', ['sass'], function (done) {

应该使用系列：

gulp.task('minify-css', gulp.series('sass', function (done) {

最终文件：

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
});

Answer 2

我尝试使用函数代替 gulp.task()，它对我有用。我在 youtube video

中找到了这个解决方案

// compile scss into css
function style() {
    // 1. where is my scss file
    return gulp.src('./app/scss/**/*.scss')
    // 2. pass that file through sass compiler
        .pipe(sass().on('error', sass.logError))
    // 3. where do I save the compiled CSS?
        .pipe(gulp.dest('./app/css'))
    // 4. stream changes to all browser
        .pipe(browserSync.stream());
}

function watch() {
    gulp.watch('./app/scss/**/*.scss', style);
    gulp.watch('./app/**/*.html').on('change', browserSync.reload);
    gulp.watch('./app/js/**/*.js').on('change', browserSync.reload);
}

exports.style = style;
exports.watch = watch;

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

upgrading gulp from 3 to 4 - Task function must be specified error - what to do?

gulp