Javascript Gulp从版本3迁移到版本4的问题

我无法将gulpfile.js从3.9.1迁移到4.0.2版。我被迫使用新的Gulp版本，因为我必须在Nodeversion 12上运行。我已经对它做了一些修改，但不是所有的东西都能像以前一样工作，例如gulp watch，dev还不能工作

你有没有办法修复gulpfile，让它像以前一样工作

之前

'use strict';

var gulp         = require('gulp'),
    watch        = require('gulp-watch'),
    //css
    sass         = require('gulp-sass'),
    postcss      = require('gulp-postcss'),
    mqpacker     = require('css-mqpacker'),
    cleanCSS     = require('gulp-clean-css'),
    autoprefixer = require('autoprefixer'),
    //js
    uglify       = require('gulp-uglify'),
    //other
    changed      = require('gulp-changed'),
    reference    = require('gulp-reference'),
    remember     = require('gulp-remember-cache'),
    rename       = require('gulp-rename'),
    sourcemaps   = require('gulp-sourcemaps'),
    fileinclude  = require('gulp-file-include'),
    imagemin     = require('gulp-imagemin'),
    pngquant     = require('imagemin-pngquant'),
    rimraf       = require('rimraf'),

    path = {
        dist: {
            html:   'dist/',
            js:     'dist/js/',
            style:  'dist/css/',
            img:    'dist/img/',
            fonts:  'dist/fonts/'
        },
        src: {
            html:  ['src/html/**/*.html','!src/html/template/**/*.html'],
            js:    ['src/js/lib/device.js', 'src/js/lib/jquery-2.2.4.js', 'src/js/main.js'],
            style: ['src/style/critical.scss', 'src/style/style.scss'],
            theme: ['src/style/color-themes/**/*.scss'],
            img:    'src/img/**/*.*',
            fonts:  'src/fonts/**/*.*'
        },
        watch: {
            html:   'src/html/**/*.html',
            js:     'src/js/**/*.js',
            style: ['src/style/**/*.scss', 'src/style/**/*.css'],
            img:    'src/img/**/*.*',
            fonts:  'src/fonts/**/*.*'
        },
        clean: './dist'
    };

var postCssPlugins = [
    autoprefixer(),
    mqpacker({
        sort: true
    }),
];

gulp.task('clean', function (cb)
{
    rimraf(path.clean, cb);
});

gulp.task('html:build', function ()
{
    return gulp.src(path.src.html)
        .pipe(fileinclude({
            prefix: '@@',
            basepath: '@file',
            indent: true
        }))
        .pipe(changed(path.dist.html, {hasChanged: changed.compareContents})) //changed.compareLastModifiedTime
        .pipe(gulp.dest(path.dist.html));
});

gulp.task('js:build', function ()
{
    return gulp.src(path.src.js)
        .pipe(sourcemaps.init())
        .pipe(reference())
        .pipe(gulp.dest(path.dist.js))
        .pipe(uglify())
        .pipe(rename({suffix: ".min"}))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest(path.dist.js));
});

gulp.task('style:build', function ()
{
    gulp.src(path.src.style)
        .pipe(sourcemaps.init())
        .pipe(reference())
        .pipe(sass({outputStyle: 'compact'}).on('error', sass.logError))
        .pipe(cleanCSS({
            format: 'beautify',
            level: 2
        }))
        .pipe(postcss(postCssPlugins))
        .pipe(gulp.dest(path.dist.style))
        .pipe(cleanCSS())
        .pipe(rename({suffix: ".min"}))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest(path.dist.style));

    gulp.src(path.src.theme)
        .pipe(sass({outputStyle: 'compact'}).on('error', sass.logError))
        .pipe(postcss(postCssPlugins))
        .pipe(gulp.dest(path.dist.style))
        .pipe(cleanCSS())
        .pipe(rename({suffix: ".min"}))
        .pipe(gulp.dest(path.dist.style));
});

gulp.task('image:build', function ()
{
    return gulp.src(path.src.img)
        .pipe(imagemin({
            optimizationLevel: 5,
            progressive: true,
            svgoPlugins: [{removeViewBox: false}],
            use: [pngquant()],
            interlaced: true
        }))
        .pipe(gulp.dest(path.dist.img));
});

gulp.task('fonts:build', function()
{
    return gulp.src(path.src.fonts)
        .pipe(changed(path.dist.fonts))
        .pipe(gulp.dest(path.dist.fonts))
});


gulp.task('js:dev', function ()
{
    return gulp.src(path.src.js)
        .pipe(remember( {dest: path.dist.js, cacheName:'scripts'} ))
        .pipe(sourcemaps.init())
        .pipe(reference())
        .pipe(rename({suffix: ".min"}))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest(path.dist.js));
});

gulp.task('style:dev', function ()
{
    gulp.src(path.src.style)
        // .pipe(remember({dest: path.dist.style, cacheName:'styles'} ))
        .pipe(sourcemaps.init())
        .pipe(reference())
        .pipe(sass().on('error', sass.logError))
        .pipe(postcss(postCssPlugins))
        .pipe(cleanCSS({
            format: 'beautify',
            level: 2
        }))
        .pipe(rename({suffix: ".min"}))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest(path.dist.style));

    gulp.src(path.src.theme)
        .pipe(sass().on('error', sass.logError))
        .pipe(postcss(postCssPlugins))
        .pipe(cleanCSS({
            format: 'beautify',
            level: 2
        }))
        .pipe(rename({suffix: ".min"}))
        .pipe(gulp.dest(path.dist.style));
});

gulp.task('image:dev', function ()
{
    return gulp.src(path.src.img)
        .pipe(changed(path.dist.img))
        .pipe(gulp.dest(path.dist.img));
});

gulp.task('build', [
    'html:build',
    'js:build',
    'style:build',
    'fonts:build',
    'image:build'
]);

gulp.task('dev', [
    'clean',
    'html:build',
    'js:dev',
    'style:dev',
    'fonts:build',
    'image:dev'
]);

gulp.task('default', ['clean'], function ()
{
    return gulp.start('build');
});

gulp.task('watch', function (_cb)
{
    watch(path.watch.html, function(event, cb)
    {
        gulp.start('html:build');
    });
    watch(path.watch.style, function(event, cb)
    {
        gulp.start('style:dev');
    });
    watch(path.watch.js, function(event, cb)
    {
        gulp.start('js:dev');
    });
    watch(path.watch.img, function(event, cb)
    {
        gulp.start('image:dev');
    });
    watch(path.watch.fonts, function(event, cb)
    {
        gulp.start('fonts:build');
    });

    _cb();
});

包括变更

'use strict';

var gulp = require('gulp'),
    watch = require('gulp-watch'),
    // css
    sass = require('gulp-sass'),
    postcss = require('gulp-postcss'),
    mqpacker = require('css-mqpacker'),
    cleanCSS = require('gulp-clean-css'),
    autoprefixer = require('autoprefixer'),
    // js
    uglify = require('gulp-uglify'),
    // other
    changed = require('gulp-changed'),
    reference = require('gulp-reference'),
    remember = require('gulp-remember-cache'),
    rename = require('gulp-rename'),
    sourcemaps = require('gulp-sourcemaps'),
    fileinclude = require('gulp-file-include'),
    imagemin = require('gulp-imagemin'),
    pngquant = require('imagemin-pngquant'),
    rimraf = require('rimraf'),
    // multi lang
    i18n = require('gulp-html-i18n'),

    path = {
        dist: {
            html: 'dist/',
            js: 'dist/js/',
            style: 'dist/css/',
            img: 'dist/img/',
            fonts: 'dist/fonts/'
        },
        src: {
            html: ['src/html/**/*.html', '!src/html/template/**/*.html'],
            js: ['src/js/lib/device.js', 'src/js/lib/jquery-2.2.4.js', 'src/js/main.js',
                'src/js/contact-form-main.js', 'src/js/jqBootstrapValidation.js',
                'src/js/newsletter-form.js'],
            style: ['src/style/critical.scss', 'src/style/style.scss'],
            theme: ['src/style/color-themes/**/*.scss'],
            img: 'src/img/**/*.*',
            fonts: 'src/fonts/**/*.*'
        },
        watch: {
            html: 'src/html/**/*.html',
            js: 'src/js/**/*.js',
            style: ['src/style/**/*.scss', 'src/style/**/*.css'],
            img: 'src/img/**/*.*',
            fonts: 'src/fonts/**/*.*',
            lang: 'src/lang/**/*.*'
        },
        clean: './dist'
    };

var postCssPlugins = [
    autoprefixer(),
    mqpacker({
        sort: true
    })
];

gulp.task('clean', async function (cb) {
    rimraf(path.clean, cb);
});

gulp.task('html:build', async function () {
    return gulp.src(path.src.html)
        .pipe(fileinclude({
            prefix: '@@',
            basepath: '@file',
            indent: true
        }))
        .pipe(i18n({
            langDir: 'src/lang',
            createLangDirs: true,
            defaultLang: 'de'
        }))
        .pipe(changed(path.dist.html, {hasChanged: changed.compareContents})) // changed.compareLastModifiedTime
        .pipe(gulp.dest(path.dist.html));
});

gulp.task('js:build', async function () {
    return gulp.src(path.src.js)
        .pipe(sourcemaps.init())
        .pipe(reference())
        .pipe(gulp.dest(path.dist.js))
        .pipe(uglify())
        .pipe(rename({suffix: ".min"}))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest(path.dist.js));
});

gulp.task('style:build', async function () {
    gulp.src(path.src.style)
        .pipe(sourcemaps.init())
        .pipe(reference())
        .pipe(sass({outputStyle: 'compact'}).on('error', sass.logError))
        .pipe(cleanCSS({
            format: 'beautify',
            level: 2
        }))
        .pipe(postcss(postCssPlugins))
        .pipe(gulp.dest(path.dist.style))
        .pipe(cleanCSS())
        .pipe(rename({suffix: ".min"}))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest(path.dist.style));

    gulp.src(path.src.theme)
        .pipe(sass({outputStyle: 'compact'}).on('error', sass.logError))
        .pipe(postcss(postCssPlugins))
        .pipe(gulp.dest(path.dist.style))
        .pipe(cleanCSS())
        .pipe(rename({suffix: ".min"}))
        .pipe(gulp.dest(path.dist.style));
});

gulp.task('image:build', async function () {
    return gulp.src(path.src.img)
        .pipe(imagemin({
            optimizationLevel: 5,
            progressive: true,
            svgoPlugins: [{removeViewBox: false}],
            use: [pngquant()],
            interlaced: true
        }))
        .pipe(gulp.dest(path.dist.img));
});

gulp.task('fonts:build', async function () {
    return gulp.src(path.src.fonts)
        .pipe(changed(path.dist.fonts))
        .pipe(gulp.dest(path.dist.fonts))
});


gulp.task('js:dev', async function () {
    return gulp.src(path.src.js)
        .pipe(remember({dest: path.dist.js, cacheName: 'scripts'}))
        .pipe(sourcemaps.init())
        .pipe(reference())
        .pipe(rename({suffix: ".min"}))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest(path.dist.js));
});

gulp.task('style:dev', async function () {
    gulp.src(path.src.style)
    // .pipe(remember({dest: path.dist.style, cacheName:'styles'} ))
        .pipe(sourcemaps.init())
        .pipe(reference())
        .pipe(sass().on('error', sass.logError))
        .pipe(postcss(postCssPlugins))
        .pipe(cleanCSS({
            format: 'beautify',
            level: 2
        }))
        .pipe(rename({suffix: ".min"}))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest(path.dist.style));

    gulp.src(path.src.theme)
        .pipe(sass().on('error', sass.logError))
        .pipe(postcss(postCssPlugins))
        .pipe(cleanCSS({
            format: 'beautify',
            level: 2
        }))
        .pipe(rename({suffix: ".min"}))
        .pipe(gulp.dest(path.dist.style));
});

gulp.task('image:dev', async function () {
    return gulp.src(path.src.img)
        .pipe(changed(path.dist.img))
        .pipe(gulp.dest(path.dist.img));
});

gulp.task('build', gulp.series(gulp.parallel(
    'html:build',
    'js:build',
    'style:build',
    'fonts:build',
    'image:build'
)));

gulp.task('dev', gulp.series(
    'clean',
    'html:build',
    'js:dev',
    'style:dev',
    'fonts:build',
    'image:dev'
));

gulp.task('default', gulp.series('clean', async function () {
    return gulp.series('build');
}));

gulp.task('watch', async function (_cb) {
    watch(path.watch.html, function (event, cb) {
        gulp.parallel('html:build');
    });
    watch(path.watch.lang, function (event, cb) {
        gulp.parallel('html:build');
    });
    watch(path.watch.style, function (event, cb) {
        gulp.parallel('style:dev');
    });
    watch(path.watch.js, function (event, cb) {
        gulp.parallel('js:dev');
    });
    watch(path.watch.img, function (event, cb) {
        gulp.parallel('image:dev');
    });
    watch(path.watch.fonts, function (event, cb) {
        gulp.parallel('fonts:build');
    });

    _cb();
});

---

试试这个开始。无

gulp.start

，改用

gulp.series

。GulpV4不在数组中使用任务。查找gulpv3到v4的迁移指南

gulp.task（'build'，gulp.series( 'html:build'， “js:build”， '风格：构建'， '字体：构建'， “图像：构建” ));

gulp.task('dev', gulp.series(
    'clean',
    'html:build',
    'js:dev',
    'style:dev',
    'fonts:build',
    'image:dev'
));

gulp.task('default', gulp.series('clean', function ()
{
    return gulp.series('build');
}));

gulp.task('watch', function (_cb)
{
    watch(path.watch.html, function(event, cb)
    {
        gulp.series('html:build');
    });
    watch(path.watch.style, function(event, cb)
    {
        gulp.series('style:dev');
    });
    watch(path.watch.js, function(event, cb)
    {
        gulp.series('js:dev');
    });
    watch(path.watch.img, function(event, cb)
    {
        gulp.series('image:dev');
    });
    watch(path.watch.fonts, function(event, cb)
    {
        gulp.series('fonts:build');
    });

    _cb();
});