Search code examples
node.jsgulpgulp-watch

Is there any other way to write the Watch function in Gulp, I was trying to execute a command in gulp but its showing errors


I'm trying to install the node.js. The installation process was successful. But when I'm running gulp command in terminal I'm getting this error.

PS C:\Users\Gayatree\test-widget> gulp
[15:32:28] Using gulpfile ~\test-widget\gulpfile.js
[15:32:28] Starting 'default'...
[15:32:28] Starting 'build'...   
[15:32:28] Starting 'compress'...
[15:32:28] Starting 'clean'...   
[15:32:28] Finished 'clean' after 23 ms
[15:32:28] Starting '<anonymous>'...   
[15:32:29] Finished '<anonymous>' after 127 ms
[15:32:29] Finished 'compress' after 157 ms
[15:32:29] Finished 'build' after 165 ms
[15:32:29] Starting '<anonymous>'...
[15:32:29] '<anonymous>' errored after 3.01 ms
[15:32:29] Error: watching ./src/**/***: watch task has to be a function (optionally generated by 
using gulp.parallel or gulp.series)
at Gulp.watch (C:\Users\Gayatree\test-widget\node_modules\gulp\index.js:31:11)        
at C:\Users\Gayatree\test-widget\gulpfile.js:47:14
at bound (domain.js:419:14)
at runBound (domain.js:432:12)
at asyncRunner (C:\Users\Gayatree\test-widget\node_modules\async-done\index.js:55:18) 
at processTicksAndRejections (internal/process/task_queues.js:76:11)
[15:32:29] 'default' errored after 377 ms
PS C:\Users\Gayatree\test-widget>

I saw in some websites where it says to change the format of writting the watch fucntion and I tried also but it didn't work. The page where its showing the error is given below.

var gulp = require("gulp"),
zip = require("gulp-zip"),
del = require("del"),
newer = require("gulp-newer"),
log = require('fancy-log'),
colors = require('ansi-colors'), 
plumber = require("gulp-plumber"),
gulpif = require("gulp-if"),
jsonTransform = require("gulp-json-transform"),
intercept = require("gulp-intercept"),
argv = require("yargs").argv,
widgetBuilderHelper = require("widgetbuilder-gulp-helper"),
jsValidate = require("gulp-jsvalidate");

var pkg = require("./package.json"),
paths = widgetBuilderHelper.generatePaths(pkg),
xmlversion = widgetBuilderHelper.xmlversion;

gulp.task("clean", function () {
    return del([
        paths.WIDGET_TEST_DEST,
        paths.WIDGET_DIST_DEST
    ], { force: true });
});

gulp.task("compress", gulp.series(["clean"], function () {
    return gulp.src("src/**/*")
        .pipe(zip(pkg.name + ".mpk"))
        .pipe(gulp.dest(paths.TEST_WIDGETS_FOLDER))
        .pipe(gulp.dest("dist"));
}));

gulp.task("build", gulp.series(["compress"]));

gulp.task("default", gulp.series(['build'], function() {
    gulp.watch("./src/**/*", ["compress"]);
    gulp.watch("./src/**/*.js", ["copy:js"]);
    gulp.watch("./src/**/*.html", ["copy:html"])
}));

gulp.task("compress", gulp.series(["clean"], function () {
    return gulp.src("src/**/*")
        .pipe(zip(pkg.name + ".mpk"))
        .pipe(gulp.dest(paths.TEST_WIDGETS_FOLDER))
        .pipe(gulp.dest("dist"));
}));

gulp.task("copy:js", function () {
    return gulp.src(["./src/**/*.js"])
        .pipe(plumber(function (error) {
            var msg = colors.red("Error");
            if (error.fileName) {
                msg += colors.red(" in ") + colors.cyan(error.fileName);
            }
            msg += " : " + colors.cyan(error.message);
            log(msg);
            this.emit("end");
        }))
        .pipe(jsValidate())
        .pipe(newer(paths.TEST_WIDGETS_DEPLOYMENT_FOLDER))
        .pipe(gulp.dest(paths.TEST_WIDGETS_DEPLOYMENT_FOLDER));
});

gulp.task("copy:html", function () {
    return gulp.src(["./src/**/*.html"])
        .pipe(newer(paths.TEST_WIDGETS_DEPLOYMENT_FOLDER))
        .pipe(gulp.dest(paths.TEST_WIDGETS_DEPLOYMENT_FOLDER));
});

gulp.task("version:xml", function () {
    return gulp.src(paths.PACKAGE_XML)
        .pipe(xmlversion(argv.n))
        .pipe(gulp.dest("./src/"));
});

gulp.task("version:json", function () {
    return gulp.src("./package.json")
        .pipe(gulpif(typeof argv.n !== "undefined", jsonTransform(function(data) {
            data.version = argv.n;
            return data;
        }, 2)))
        .pipe(gulp.dest("./"));
});

gulp.task("icon", function (cb) {
    var icon = (typeof argv.file !== "undefined") ? argv.file : "./icon.png";
    console.log("\nUsing this file to create a base64 string: " + colors.cyan(icon));
    gulp.src(icon)
        .pipe(intercept(function (file) {
            console.log("\nCopy the following to your " + pkg.name + ".xml (after description):\n\n" + colors.cyan("<icon>") + file.contents.toString("base64") + colors.cyan("<\/icon>") + "\n");
            cb();
        }));
});

gulp.task("folders", function () {
    paths.showPaths(); return;
});

gulp.task("modeler", function (cb) {
    widgetBuilderHelper.runmodeler(MODELER_PATH, MODELER_ARGS, paths.TEST_PATH, cb);
});

gulp.task("version", gulp.parallel(["version:xml", "version:json"]));

Can Someone help me to debug this code? I have checked the codes but I couldn't understand where the problem is.


Solution

  • You have many lines of code that look like this:

    gulp.parallel(["version:xml", "version:json"])

    and

    gulp.task("compress", gulp.series(["clean"], function () {

    Change them all to be of the form:

    gulp.parallel("version:xml", "version:json")

    and

    gulp.task("compress", gulp.series("clean", function () {

    series and parallel do not take an array as an argument. See https://gulpjs.com/docs/en/api/series#parameters

    Change these as well, from

    gulp.watch("./src/**/*", ["compress"]);
      gulp.watch("./src/**/*.js", ["copy:js"]);
      gulp.watch("./src/**/*.html", ["copy:html"])
      gulp.watch("./src/**/*.html", ["copy:html"])
    

    to

    gulp.watch("./src/**/*", gulp.series("compress"));
      gulp.watch("./src/**/*.js", gulp.series("copy:js"));
      gulp.watch("./src/**/*.html", gulp.series("copy:html"))
      gulp.watch("./src/**/*.html", gulp.series("copy:html"))