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

Question

我的目标是在 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

然后我将代码更改为下面的代码：compatible with 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 throw err; ^

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)

我做错了什么？

一些信息：

OS: Mac Os (Mojave)

Gulp Versions -> CLI version: 2.1.0, Local version: 4.0.0

Node: v10.15.3

Clasp: 2.1.0

Answer 1

对该特定错误的快速修复是您在 push 任务中的 empty/non-existant 任务上调用了 gulp.series。 gulp.series 期待与您声明的任务（例如 push、watch 和 default）或任务函数相对应的字符串列表。

删除系列中的 '' 任务将修复它：

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

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

None 的任务有回调。每个 Gulp 任务都是异步的，因此您必须使用回调或 return a stream/promise/event emitter/child process/observable（例如 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);
      });
});

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

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

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

Answer 2

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

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

How do i re-write this gulpfile.js in gulp version 4.0

node.js

node-modules

gulp

clasp