New Assets Build Tool (Assets Manager)

[Skrypt]

Some extra work for me on Christmas holidays.🎅🏼

Assets Manager

Created by @jptissot

Based on Concurrently and Parcel but can also run Vite and Webpack too. This is a non-opiniated build tool which allows to be extended for any asset compiler/bundler that someone may require.

This build tool essentially uses Concurrently instead of Gulp.
Concurrently, is a concurrent shell runner which allows to trigger any possible shell command. It allows to trigger Parcel, Vite, Gulp or any other command that we need for building assets. Everything is written as ES6 modules (.mjs files).

Kind of needed for Vue 3 migration because it needs to use either Vite or Parcel to build as ES6 modules.

Old assets are not compiled as ES6 modules so they don't need these bundlers. For that matter I kept the old gulpfile.js which will be now triggered by Concurrently.

What needs to be done over time is to migrate these javascript files to ES6 modules (.mjs files or .ts files) so that we can compile them as modules. But that's a migration that will happen over time.

Features

• Build everything: yarn build
• Build module by name: yarn build -n module-name
• Watch module by name: yarn watch -n module-name.
• Build with gulp: yarn build -g
• Rebuild with gulp: yarn build -gr
• Host with dev server: yarn host -n module-name.
• Clean folders with yarn clean. Will also clean parcel-cache folder.
• Makes uses of latest yarn version 4.6.0. OC is currently on version 1.something
• Makes use of yarn workspaces which allows to import files from different locations in the app for sharing ES6 modules.
• VS Code launcher debug option added as "Asset Bundler Tool Debug"
• Build assets by tag: yarn build -t tagname
• Gulp pipeline still using GulpAssets.json file
• New Assets.json file definitions for building with new tool.
• Concurrently will retry building up to 3 times making CI build less prone to fail.
• Moving package.json files to Assets folder of modules and themes. This will remove these files from the compiled C# .dll files.
• Removes unnecessary package-lock.json files as we now rely on a single yarn.lock file.
• When using watch sass action it will recursively watch imports in files.

Update

Finally, I'm keeping the old gulp pipeline because there is nothing wrong with it. Also, for backward compatibility with older modules that requires it. I'm using GulpAssets.json for the Gulp build tool and using Assets.json for the new one. This way, no need to migrate to the new build tool. I'm simply triggering gulp rebuild with Concurrently in the new asset build tool. Because that's what it is essentially, a concurrent shell runner. This way, it is going to be a softer migration for those who already have modules that are built with the old gulp pipeline.

Of course, this PR needs to be accepted by community first.

TODO

• More documentation.

Modules to migrate:

• OrchardCore.Resources (Almost everything worked except (Monaco and Trumbowyg RTL)
• OrchardCore.Media (Not a great idea to waste time on migrating this as we are refactoring to Vue 3)
• OrchardCore.Liquid (Monaco Editor Intellisense)

@jptissot @deanmarcussen @aderderian

Fixes #14169. Related to #15740.

[Piedone]

You've been sneakily working on this since April ;).

Fixes #15740 #14169 #6762?

[Skrypt]

What do you mean by?

I want to move to File App as soon as possible. That was the original goal.

I meant Media Gallery refactor to Vue 3 and typescript. The goal here with this PR was to create a Build tool that would work for building the new Media Gallery in Orchard Core. And that I would be able to use with CI. I did not intent to start refactoring the entire javascript base code of Orchard Core for that matter.

So, this is why I did it partially and pushing work on those remaining module for later on.

[Piedone]

I see, I didn't know you were referring to the Media module, OK.

[Piedone]

I get a bunch of errors of this sort on build:

And thus:

[Skrypt]

you need to redo a "yarn" on the root folder to discover the new workspace

[Piedone]

Do you mean that I have to run yarn twice? Because this is with a fresh clone (actually, a cleaned repo), so there aren't any artifacts from the previous names or anything. However, with the current code (again after a git clean), I get this (yarn, then yarn build -gr):

[Skrypt]

Make sure that you have a build.config.mjs file standing at the root of your repository. That's necessary to configure the Assets Manager "watched" folders.

I did a "git clean -xdf" locally on the latest commit of this branch in Windows and could not repro. Else, something is blocking usage of .mjs files on the computer you used.

[Skrypt]

See repro result here after removing the build.config.mjs file locally:

[Skrypt]

Not exactly the same though. Well I think I found the issue. But could not repro.

[Skrypt]

Please pull latest and try again.

[Piedone]

All I'm really looking for is a simple, clear set of instructions for anybody who wants to contribute changes to existing projects' static assets. This is the overwhelming majority of cases when anybody interacts with Gulp, and will be the case for the new pipeline too. We need something for the diligent people to read before contributing, and something that we can link to for the others.

To be able to close this matter quicker, I took the liberty and added what I'm suggesting to the docs, please check.

[Piedone]

I added docs about this too.

[hishamco]

803 files changed 💣 it seems a massive PR :)

[Skrypt]

803 files changed 💣 it seems a massive PR :)

It is. I don't know how much time I spent on this. Hope to be done soon.