1. ホーム
  2. その他

gulp build exception タスク関数を指定する必要があります。

2022-02-10 19:41:21
<パス

ここにカスタムカタログタイトルを記入

gulp build exception タスク関数を指定する必要があります。

を学ぶ上で タイプスクリプト を学習中に表示される例外メッセージ
具体的な原因としては gulp3 gulp4 は、依存関係の読み込み方法の変更に起因するものです。

例外メッセージ

> gulp
{ AssertionError [ERR_ASSERTION]: Task function must be specified
    at Gulp.set [as _setTask] (D:\workspace\font\typescript-demo\node_modules\undertaker\lib\set-task.js:10:3)
    at Gulp.task (D:\workspace\font\typescript-demo\node_modules\undertaker\lib\task.js:13:8)
    at Object.<anonymous> (D:\workspace\font\typescript-demo\gulpfile.js:16:6)
    at Module._compile (internal/modules/cjs/loader.js:722:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:733:10)
    at Module.load (internal/modules/cjs/loader.js:620:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:560:12)
    at Function.Module._load (internal/modules/cjs/loader.js:552:3)
    at Module.require (internal/modules/cjs/loader.js:658:17)
    at require (internal/modules/cjs/helpers.js:22:18)
  generatedMessage: false,
  name: 'AssertionError [ERR_ASSERTION]',
  code: 'ERR_ASSERTION',
  actual: false,
  expected: true,
  operator: '==' }

> gulp -v
CLI version: 2.3.0
Local version: 4.0.2

var gulp = require("gulp");
var browerify = require("browserify");
var source = require("vinyl-source-stream");
var tsify = require("tsify");
var ts = require("gulp-typescript");
var tsProject = ts.createProject("tsconfig.json");
var paths = {
    pages: ["src/*.html"]
}

gulp.task("copy-html", () => {
    return gulp.src(paths.pages)
        .pipe(gulp.dest("dist")));
});

gulp.task("default", ["copy-html"], function () {
    return browerify({
            basedir: ". ",
            debug: true,
            entries: ['src/main.ts'],
            cache: {},
            packageCache: {}
        })
        .plugin(tsify)
        .bundle()
        .pipe(source('bundle.js'))
        .pipe(gulp.dest("dist"));
});


バージョンを表示します。

gulp.series

gulpfile.js

gulp.task('default', gulp.series('del', function() { 
    // default task code here
}));


解決方法

使用方法 gulpfiles.js 関数を使って、モジュールのロード順序を指定します。

var gulp = require("gulp");
var browerify = require("browserify");
var source = require("vinyl-source-stream");
var tsify = require("tsify");
var ts = require("gulp-typescript");
var tsProject = ts.createProject("tsconfig.json");
var paths = {
    pages: ["src/*.html"]
}

gulp.task("copy-html", () => {
    return gulp.src(paths.pages)
        .pipe(gulp.dest("dist")));
});

gulp.task("default", gulp.series("copy-html", function () {
    return browerify({
            basedir: ". ",
            debug: true,
            entries: ['src/main.ts'],
            cache: {},
            packageCache: {}
        })
        .plugin(tsify)
        .bundle()
        .pipe(source('bundle.js'))
        .pipe(gulp.dest("dist"));
}));


の具体的な変更点 gulpfiles.js は以下の通りです。

var gulp = require("gulp");
var browerify = require("browserify");
var source = require("vinyl-source-stream");
var tsify = require("tsify");
var ts = require("gulp-typescript");
var tsProject = ts.createProject("tsconfig.json");
var paths = {
    pages: ["src/*.html"]
}

gulp.task("copy-html", () => {
    return gulp.src(paths.pages)
        .pipe(gulp.dest("dist")));
});

gulp.task("default", gulp.series("copy-html", function () {
    return browerify({
            basedir: ". ",
            debug: true,
            entries: ['src/main.ts'],
            cache: {},
            packageCache: {}
        })
        .plugin(tsify)
        .bundle()
        .pipe(source('bundle.js'))
        .pipe(gulp.dest("dist"));
}));


参考

  1. Gulp 4にアップデートするにはどうしたらいいですか?