gulp 4でサブタスクをどのように編成すればよいですか？

Question

gulp 4を使用しているときにサブタスクに問題があります。 gulp 3では、いくつかのファイルに分割されたタスクがあり、gulp-load-subtasksを使用してロードして実行します。私がgulp 4を使用すると、タスクを読み込もうとすると問題が発生します。例：タスク（タスクbに依存）をロードすることができません。タスクbがロードされます。これをやろうとするとエラーAssertionError: Task never defined: bが発生します。

これが私のフォルダです：

gulpflie.babel.js workflow/ common.js task/ a.js b.js

どのように私は一口4でサブタスクを整理する必要がありますか？

Answer 1

あなたのようなファイルで自分のタスクを編成しましたが、ES6のインポート/エクスポートを使用しています。

例：私はタスク清潔、スクリプトとgulpfile.babel.jsまし 、内容は以下の通りです： tasks/clean.js：

import promisedDel from 'promised-del'; 

let cleanTaskCreator = (config) => { 
    let task = (done) => { 
    return promisedDel((typeof config.path === 'string' ? [config.dest] : config.dest)); 
    }; 
    task.displayName = 'clean:' + config.name; 
    task.description = 'clean task for ' + config.name; 
    return task; 
}; 

export default cleanTaskCreator; 

tasks/scripts.js：

import gulp from 'gulp'; 
import named from 'vinyl-named'; 
import webpack from 'webpack-stream'; 

import {scripts as config} from '../config.js'; 
import clean from "./clean"; 

let scripts =() => { 
    return gulp.src(config.entries) 
    .pipe(named()) 
    .pipe(webpack(config.webpackConfig)) 
    .pipe(gulp.dest(config.dest)); 
}; 

scripts.displayName = 'scripts'; 
scripts.description = 'generation of scripts assets'; 

if(process.env.NODE_ENV !== 'production') { 
    let realScripts = scripts; 
    scripts = gulp.series(clean(config), realScripts); 
    scripts.displayName = 'clean&scripts'; 
    scripts.description = 'clean scripts and ' + scripts.description; 
} 

export default scripts; 

、最終的にgulpfile.babel.js：

import * as gulp from "gulp" 
import scripts from "./gulp/tasks/scripts"; 

gulp.task(scripts); 

let defaultTask = gulp.series(scripts); 
defaultTask.displayName = 'default'; 
defaultTask.description = 'default'; 
gulp.task(defaultTask); 

すべてのタスクは実行される関数を公開し、内部的にすべての依存関係を定義します（タスクスクリプトで確認できますが、生産時には世代前に資産を消去します）。 次に、メインファイルは、これらの関数だけをインポートし、メインタスク（古典的なデフォルト）とコマンドラインから到達可能な他のタスクを定義します。

これがgulp4でプロジェクトを（大小の）整理するのに最適なモードかどうかは分かりませんが、私にとってはこのレイアウトは問題ありません。

最後に、gulp-load-subtasksのようなモジュールはgulp4で動作しません（指摘したように）。