我如何在 gulp 4.0 版中重写这个 gulpfile.js

Posted 2023-03-07

【中文标题】我如何在 gulp 4.0 版中重写这个 gulpfile.js

【英文标题】：How do i re-write this gulpfile.js in gulp version 4.0

【发布时间】：2019-08-20 04:30:25

【问题描述】：

我的目标是在 gulp 的帮助下通过代表我在终端上执行“clasp push”来自动推送文件。

当我在 gulpfile.js 中编写以下内容时出现此错误

const gulp = require("gulp");
const exec = require("child_process");

gulp.task('push', function () 
    exec("clasp push")
);

gulp.task('watch', function () 
    gulp.watch([
        '**/* .js',
        "**/* .html"
    ], ['push'])
);

gulp.task('default', ['watch']);

错误：

Task function must be specified
    at Gulp.set [as _setTask] (/Users/micklo/Desktop/AppsScriptProjects/AppsScriptAppName/node_modules/undertaker/lib/set-task.js:10:3)
    at Gulp.task (/Users/micklo/Desktop/AppsScriptProjects/AppsScriptAppName/node_modules/undertaker/lib/task.js:13:8)
    at Object.<anonymous> (/Users/micklo/Desktop/AppsScriptProjects/AppsScriptAppName/gulpfile.js:15:6)
    at Module._compile (internal/modules/cjs/loader.js:701:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
    at Module.load (internal/modules/cjs/loader.js:600:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
    at Function.Module._load (internal/modules/cjs/loader.js:531:3)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:22:18)

然后我意识到我正在使用 Gulp 版本 4.0.0

然后我将代码更改为以下代码：与 Gulp V 4.0.0 兼容

const gulp = require("gulp");
const exec = require("child_process");

gulp.task('push', gulp.series('', function()
    exec("clasp push")
));

gulp.task('watch', gulp.series('push',function () 
    gulp.watch([
        '**/* .js',
        "**/* .html"
    ])
));

gulp.task('default', gulp.series('watch', function()
    gulp.watch([
        '**/* .js',
        "**/* .html"
    ]);
));

但是我仍然得到这个错误：

assert.js:350 抛出错误； ^

AssertionError [ERR_ASSERTION]: Task never defined: 
    at getFunction (/Users/micklo/Desktop/AppsScriptProjects/AppsScriptAppName/node_modules/undertaker/lib/helpers/normalizeArgs.js:15:5)
    at map (/Users/micklo/Desktop/AppsScriptProjects/AppsScriptAppName/node_modules/arr-map/index.js:20:14)
    at normalizeArgs (/Users/micklo/Desktop/AppsScriptProjects/AppsScriptAppName/node_modules/undertaker/lib/helpers/normalizeArgs.js:22:10)
    at Gulp.series (/Users/micklo/Desktop/AppsScriptProjects/AppsScriptAppName/node_modules/undertaker/lib/series.js:13:14)
    at Object.<anonymous> (/Users/micklo/Desktop/AppsScriptProjects/AppsScriptAppName/gulpfile.js:4:24)
    at Module._compile (internal/modules/cjs/loader.js:701:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
    at Module.load (internal/modules/cjs/loader.js:600:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
    at Function.Module._load (internal/modules/cjs/loader.js:531:3)

我做错了什么？

一些信息：

操作系统：Mac OS (Mojave)

Gulp 版本 -> CLI 版本：2.1.0，本地版本：4.0.0

节点：v10.15.3

表扣：2.1.0

【问题讨论】：

clasp push --watch?我承认你必须在你的开发会话开始时执行它，然后在结束时退出它，但理论上这正是你想要做的。

【参考方案1】：

   For re-write this gulpfile.js in gulp version 4.0 Please updated your 
   gulpfile.js according to your requirement. 

   this solution for assert.js:350 throw err; Bootstarp 4, SASS, gulp 4.

/////////////////////////////////////// /////////////////////////////

    var gulp        = require('gulp');
    var browserSync = require('browser-sync').create();
    var sass        = require('gulp-sass');

    // Compile sass into CSS & auto-inject into browsers
    gulp.task('sass', function() 
        return gulp.src(['node_modules/bootstrap/scss/bootstrap.scss', 
        'src/scss/*.scss'])
            .pipe(sass())
            .pipe(gulp.dest("src/css"))
            .pipe(browserSync.stream());
    );

    // Move the javascript files into our /src/js folder
    gulp.task('js', function() 
        return gulp.src(['node_modules/bootstrap/dist/js/bootstrap.min.js', 
         'node_modules/jquery/dist/jquery.min.js', 
         'node_modules/popper.js/dist/umd/popper.min.js'])
            .pipe(gulp.dest("src/js"))
            .pipe(browserSync.stream());
    );

    // Static Server + watching scss/html files
    gulp.task('serve', gulp.series('sass', function() 

        browserSync.init(
            server: "./src"  
        );

        gulp.watch(['node_modules/bootstrap/scss/bootstrap.scss', 
         'src/scss/*.scss'], gulp.series('sass'));
        gulp.watch("src/*.html").on('change', browserSync.reload);
    ));

    gulp.task('default', gulp.parallel('js','serve'));

【参考方案2】：

对该特定错误的快速修复是您在push 任务中的一个空/不存在的任务上调用了gulp.series。 gulp.series 需要与您声明的任务（例如 push、watch 和 default）或任务函数相对应的字符串列表。

摆脱系列中的'' 任务将修复它：

gulp.task('push', gulp.series(function()
    exec('clasp push')
));

但是您现在还有一些其他问题：

您的所有任务都没有回调。每个 Gulp 任务都是异步的，因此您必须使用回调或 return 流/承诺/事件发射器/子进程/可观察（例如 located in the docs here）。例如：

gulp.task('push', function(done)
    exec('clasp push', function (err, stdout, stderr) 
        console.log(stdout);
        console.log(stderr);
        done(err);
      );
);

您没有将函数或串行/并行序列传递给gulp.watch，因此它什么也没做。如果您尝试在任何.js 或.html 文件更改时运行push 任务，您需要将其更改为：

gulp.task('watch', function(done) 
    gulp.watch([
        '**/*.js',
        '**/*.html'
    ], gulp.series('push'));
    done();
);

您的 glob 模式在文件扩展名之前的 watch 命令中有一个额外的空格：'**/*.js' 而不是 '**/* .js' 您可能希望require("child_process").exec（带有额外的.exec 标记）允许您使用exec(command) 语法执行shell 命令。 在watch任务中调用watch命令时无需重复：

gulp.task('default', gulp.series('push', 'watch'));

您可以删除大量gulp.series 调用以删除<anonymous> 任务调用并简化任务。每个任务只需要一个函数，您可能应该将gulp.series 和gulp.parallel 与一组命名任务一起使用。

更改这些点，代码应如下所示：

const gulp = require('gulp');
const exec = require('child_process').exec;

gulp.task('push', function(done)
    exec('clasp push', function (err, stdout, stderr) 
        console.log(stdout);
        console.log(stderr);
        done(err);
      );
);

gulp.task('watch', function(done) 
    gulp.watch([
        '**/*.js',
        '**/*.html'
    ], gulp.series('push'));
    done();
);

gulp.task('default', gulp.series('push', 'watch'));

您可以使用 gulp v4 推荐的导出任务模式重写此代码：

const  series, watch  = require('gulp');
const  exec  = require('child_process');

function push(done) 
    exec('clasp push', function (err, stdout, stderr) 
        console.log(stdout);
        console.log(stderr);
        done(err);
      );


function watchPush() 
    return watch(['**/*.js', '**/*.html'], push);


exports.push = push;
exports.default = exports.watch = series(push, watchPush);

【讨论】：

我收到以下错误“[09:39:39] 以下任务未完成：默认、观看、推送、 [09:39:39] 你忘记发出异步信号了吗完成了吗？”

可能是exec函数需要在自己的回调函数中通知gulp任务回调。我已经更改了答案中的最终代码块以反映这一点。如果不是这样，我会仔细检查你在命令行上运行的 gulp 版本是 4.0.0 和 gulp --version（因为你可能有一个全局 gulp@4.0.0 安装和一个本地 gulp@3.* .* 安装）。

@Micklo_Nerd 我还通过删除一些 gulp.series 调用简化了一些任务，并使用 gulp v4 推荐的导出任务模式进行了重写，这可能会给你带来更好的运气。如果错误仍然存​​在，是在您调用gulp push 时还是仅在您调用gulp 时仍然存在？