gulp 4、如何让我的gulpfile.js工作？

Question

我在尝试迁移到 gulp 4 时感到恶心，我浪费了将近 2 天的时间来做这件事.... 我阅读了有关新功能 API、关于串行、并行的信息。我彻底卸载了所有以前的软件包，并在本地安装了 gulp 4 并在全局安装了 gulp-cli。

我的控制台显示

[17:17:07] CLI version 2.0.1
[17:17:07] Local version 4.0.0

这是我的 gulpfile.js（我也尝试描述函数 w/o gulp.task 但使用简单的命名函数声明然后执行 "exports.funcName = funcName"）

    var gulp                = require("gulp"),
      browserSync           = require("browser-sync"),
      cssNano               = require("cssnano"),
      sass                  = require("gulp-sass"),
      plumber               = require("gulp-plumber"),
      gutil                 = require("gulp-util"),
      uglifyJs              = require("gulp-uglify-es").default,
      rename                = require("gulp-rename"),
      pug                   = require("gulp-pug"),  
      concat                = require("gulp-concat");



    gulp.task('server', gulp.series( (done) => {
      browserSync.init({
      server: "./",
      notify: false
      });

      done();
    }));


    gulp.task('pug', gulp.series( () => {
      gulp.src('pug/pages/*.pug')
      .pipe(pug({
        pretty: true
      }))
      .pipe(gulp.dest('./'));
    }));


    gulp.task('sass', gulp.series( () => {
      return gulp.src('sass/*.+(sass|scss)')
          .pipe(plumber(function(error) {
            gutil.log(error.message);
            this.emit('end');
          }))
          .pipe(sass())
          .pipe(gulp.dest('css/'))
          .pipe(browserSync.reload({stream:true}))
    }));



    gulp.task('uglify', gulp.series( function() {
      return gulp.src(['js/*.js', '!js/*.min.js'])
          .pipe(uglifyJs())
          .on('error', function (err) {
            console.error('Error in js task', err.toString());
          })
          .pipe(rename(function(path) {
            path.basename += ".min"
          }))
          .pipe(gulp.dest('js/'))
          .pipe(browserSync.reload({ stream: true }));
    }));

    gulp.task('compress', gulp.series('uglify', () => {
      return gulp.src(['js/*.min.js', '!js/all.min.js'])
          .pipe(concat('all.min.js'))
          .pipe(gulp.dest('js/'))
    }));



    gulp.task('watch', gulp.series('server', function () {
      gulp.watch('*.html', browserSync.reload);
      gulp.watch('sass/*.+(sass|scss)', ['sass']);
      gulp.watch('js/*.js', ['js']);
    }));


    gulp.task('default', watch);

反正我总是出错..... ReferenceError：手表未定义或任何一种断言错误

求助....

Answer 1

这真是 Whosebug 的魔法。我在创建问题后 5-15 分钟内找到解决方案 :).

我的孤独是将监视任务重写为这种格式：

gulp.task('watch', gulp.series('server'));

function watch () {
     gulp.watch('*.html', browserSync.reload);
     gulp.watch('sass/*.+(sass|scss)', sass);
};

gulp 4、如何让我的gulpfile.js工作？

gulp 4 , how to get my gulpfile.js working?

node.js

gulp-4