Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

New Asset Build Tool #17262

Open
wants to merge 25 commits into
base: main
Choose a base branch
from
Open

New Asset Build Tool #17262

wants to merge 25 commits into from

Conversation

Skrypt
Copy link
Contributor

@Skrypt Skrypt commented Dec 19, 2024

Some extra work for me on Christmas holidays.🎅🏼

Assets Build Tool

Created by @jptissot

Based on Concurrently and Parcel but can also run Vite and probably Webpack too (untested). 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
  • Makes uses of latest yarn version 4.5.3. 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

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 Assets2.json for the new build tool simply. 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

  • Fix the CI build. Works locally but seems to throw an exception on file paths because CI is using Linux.
  • Start using the new build tool in some modules where we can migrate everything to it.

@jptissot @deanmarcussen @aderderian

Skrypt added 21 commits April 3, 2024 22:17
# Conflicts:
#	src/OrchardCore.Modules/OrchardCore.AdminDashboard/Assets.json
#	src/OrchardCore.Modules/OrchardCore.AdminMenu/Assets.json
#	src/OrchardCore.Modules/OrchardCore.AdminMenu/wwwroot/Scripts/admin-menu-icon-picker.js
#	src/OrchardCore.Modules/OrchardCore.Media/ResourceManifestOptionsConfiguration.cs
#	src/OrchardCore.Modules/OrchardCore.Resources/package.json
Copy link
Member

@Piedone Piedone left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Fixes #15740 #14169 #6762?

.scripts/assets-build-tool/Readme.md Outdated Show resolved Hide resolved
"action": "sass",
"name": "admin-dashboard",
"source": "Assets/scss/dashboard.scss",
"dest": "wwwroot/Styles/",
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can this be (and Scripts) the default?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We could surely do that.

"cleanup": "node .scripts/cleanup.js",
"build": "asset-bundler build",
"copy": "asset-bundler copy",
"watch": "asset-bundler watch",
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should this work already?

image

Copy link
Contributor Author

@Skrypt Skrypt Dec 21, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The issue is that I'm not providing any Asset2.json bundler configuration yet.

  • I will need to add an example.
  • Will need to add a null check there so that it doesn't show this error message.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How did these change if the module is not yet updated?

Copy link
Contributor Author

@Skrypt Skrypt Dec 21, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, I think it is because it is using Yarn latest version and it is resolving different version of dependencies/packages.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants