久々にUsusamaをアップデートしました。今回は結構大規模な改修になったため、一気にナンバリングを5.x.x-4.3.1系から6.0.0-4.3.1に上げました。変更点については以下を参照。Ususamaトピックはいくつかありますが、大きな変更点としてはGulpタスクの文法を変えたことです。その際に躓いた点、また検索はしたもののあまり情報がヒットせずもやもやした点をまとめたいと思います。関数式の記述が可能かexportsしたタスクをどのようにインポートし、実行するかフラグによってタスクを増減させたい複数のタスクが1ファイルにある場合、どうexportsするか前置き過去の話になりますが、一応Gulpのバージョンを長らく使われていた3.9.1から4.x系に移行したのが、Ususamaでは3.7.0-4.1.3になります。v_3.7.0-4.1.3このときは今から思えばとりあえず4.x系にアップデートしただけという感じで、package.jsonでのバージョン指定はnextという表記方法まだgulpfile.js1つに全てのタスクを記載タスクの定義はgulp.task()構文のままという形でした。これを基本的に1タスク1ファイルという形で分離させたのが、3.11.0-4.1.3でした。ver.3.11.0-4.1.3ただし、このときもまだタスクの定義はgulp.task()構文のままでした。gulp.jsということで、推奨されなくなりました。代わりに、関数宣言とexportsが推奨となりました。独自構文からECMAScriptに寄った形になったのだと思います。TASKNAME;以下、node.jsのバージョンは10.16.3、Gulpは4.0.2の環境で確認しました。関数式の記述が可能かここでまず気になったのは、「関数宣言ではなく関数式は使えるのか?」ということ。TASKNAME;試してみたところできました。exportsしたタスクをどのようにインポートし、実行するか1.でexportsはできました。次は、これをどうやってインポートするか。TASK1`で実行可能requireでJSファイルを読み込んで、exportsに渡す、と。受け取り側はrequireですが、ECMAScriptの標準的な構文に近い形で行けました。フラグによってタスクを増減させたいUsusamaでは、YAMLファイルの設定を読み込んでタスクを変化させたいものがいくつかありました。「dist/下にあるHTMLファイルを探索して、人間用のサイトマップを生成する」というのもその一つです。フラグがtrueならばサイトマップ生成をタスクに込め、falseならばサイトマップは生成しない、という具合です。taskBuild;イメージとしてはこのような形。gulpfile.jsに関してはこれで良かったのですが、一点元のタスクファイル側で変更が必要でした。Object]になってしまって上手く動かなかったので、module.exportsに変更しました。この形式ならば、上述のタスク(というより関数)の配列をそのままseriesやparallelに突っ込んで動かすことができました。seriesやparallelに突っ込むのがただの「JavaScriptの関数の配列」ならば、配列操作のpushやunshift等が使えるだろう、と推測できたので試してみたとこと、思った通り実現できた、という次第です。複数のタスクが1ファイルにある場合、どうexportsするか今度は、複数のタスクが1ファイルに宣言されているケースについて。JavaScriptでconcatの後にuglifyする、としています。jsBuild);4.x系で導入されたseriesやparallelを使えば、タスクを塊にしてexportsはできます。それぞれのタスクを単体で実行したい場合はどうするか。//concat→jsbuildの順番で走るモジュールでexportsできるならば、この書き方でできるはず。以上4点、私のケースでは対処できたサンプルのまとめでした。Blogこの記事を書いた人アルム=バンドフロントエンド・バックエンド・サーバエンジニア。LAMPやNodeからWP、Gulpを使ってejs,Scss,JSのコーディングまで一通り。RasPiで遊んだり、趣味で開発したり。UsusamaにHTMLファイル一覧ページ生成機能を追加+αきっかけは家富さんの下記ツイートでした。このツイートを拝見し、なるほどと思いました。