Fomantic-ui: Problem building all components

[batata004]

Hi,

Untill all the versions of Fomantic UI (except the latest 2.8.6) when I executed the command npx gulp build on my terminal, it would build ALL components inside dist/components directory (minified and not minified) and after that it would build the semantic.min.css and semantic.min.js WITH ONLY the components that I specified at components item inside semantic.json file.

However, in the latest Fomantic UI version, it only builds in the dist/components directory the components specified inside the semantic.json file and nothing else. This behaviour is not desirable since most times I just want to generate the semantic.min.js file with some specific components, but I also want to have all the other components built, ready to be imported in any project only when needed.

Is there a switch/flag I can use to make the behaviour of all previous version work again?

[batata004]

I dont know if it helps, but below is what my CMD returned after I execute the command npx gulp build

EDIT: my gulpfile.js is the default (I didnt change anything) and my semantic.json file is also the same as default, except I added some components, I didnt change anything else!

C:\fomantic-ui\semantic>npx gulp build
[17:00:14] Using gulpfile C:\fomantic-ui\semanticgulpfile.js
[17:00:14] Starting 'build'...
Building Semantic
[17:00:14] Starting 'build-css'...
[17:00:14] Starting 'Building uncompressed CSS'...
[17:00:14] Starting 'Building compressed CSS'...
[17:00:15] Created: distcomponents\reset.min.css
[17:00:15] Created: distcomponents\reset.css
[17:00:16] Created: distcomponents\site.css
[17:00:16] Created: distcomponents\site.min.css
[17:00:17] Created: distcomponents\button.css
[17:00:17] Created: distcomponents\button.min.css
[17:00:18] Created: distcomponents\form.min.css
[17:00:18] Created: distcomponents\form.css
[17:00:19] Created: distcomponents\menu.min.css
[17:00:19] Created: distcomponents\menu.css
[17:00:20] Created: distcomponents\message.min.css
[17:00:20] Created: distcomponents\message.css
[17:00:21] Created: distcomponents\dimmer.min.css
[17:00:21] Created: distcomponents\dimmer.css
[17:00:22] Created: distcomponents\modal.min.css
[17:00:22] Created: distcomponents\modal.css
[17:00:23] Created: distcomponents\popup.min.css
[17:00:23] Created: distcomponents\popup.css
[17:00:24] Created: distcomponents\transition.min.css
[17:00:24] Finished 'Building compressed CSS' after 9.72 s
[17:00:24] Created: distcomponents\transition.css
[17:00:24] Finished 'Building uncompressed CSS' after 9.73 s
[17:00:24] Starting 'Packing uncompressed CSS'...
[17:00:24] Starting 'Packing compressed CSS'...
[17:00:25] Created: distsemantic.min.css
[17:00:25] Finished 'Packing compressed CSS' after 988 ms
[17:00:25] Created: dist\semantic.css
[17:00:25] Finished 'Packing uncompressed CSS' after 990 ms
[17:00:25] Finished 'build-css' after 11 s
[17:00:25] Starting 'build-javascript'...
[17:00:25] Starting 'Building un/compressed Javascript'...
[17:00:25] Created: distcomponents\form.js
[17:00:25] Created: distcomponents\site.js
[17:00:25] Created: distcomponents\form.min.js
[17:00:25] Created: distcomponents\dimmer.js
[17:00:26] Created: distcomponents\site.min.js
[17:00:26] Created: distcomponents\modal.js
[17:00:26] Created: distcomponents\dimmer.min.js
[17:00:26] Created: distcomponents\popup.js
[17:00:26] Created: distcomponents\modal.min.js
[17:00:26] Created: distcomponents\transition.js
[17:00:26] Created: distcomponents\popup.min.js
[17:00:26] Created: distcomponents\transition.min.js
[17:00:26] Finished 'Building un/compressed Javascript' after 1.7 s
[17:00:26] Starting 'Packing uncompressed Javascript'...
[17:00:26] Starting 'Packing compressed Javascript'...
[17:00:27] Created: distsemantic.min.js
[17:00:27] Finished 'Packing compressed Javascript' after 1.03 s
[17:00:27] Created: dist\semantic.js
[17:00:27] Finished 'Packing uncompressed Javascript' after 1.04 s
[17:00:27] Finished 'build-javascript' after 2.74 s
[17:00:27] Starting 'build-assets'...
[17:00:27] Starting 'Building Assets'...
[17:00:27] Created: dist\themes\basic\assets\fontsicons.eot
[17:00:27] Created: dist\themes\basic\assets\fontsicons.svg
[17:00:27] Created: dist\themes\basic\assets\fontsicons.ttf
[17:00:27] Created: dist\themes\basic\assets\fontsicons.woff
[17:00:27] Created: dist\themes\default\assetsimages\flags.png
[17:00:27] Created: dist\themes\default\assets\fonts\brand-icons.eot
[17:00:27] Created: dist\themes\default\assets\fonts\brand-icons.svg
[17:00:27] Created: dist\themes\default\assets\fonts\brand-icons.ttf
[17:00:27] Created: dist\themes\default\assets\fonts\brand-icons.woff
[17:00:27] Created: dist\themes\default\assets\fonts\brand-icons.woff2
[17:00:27] Created: dist\themes\default\assets\fontsicons.eot
[17:00:27] Created: dist\themes\default\assets\fontsicons.svg
[17:00:27] Created: dist\themes\default\assets\fontsicons.ttf
[17:00:27] Created: dist\themes\default\assets\fontsicons.woff
[17:00:27] Created: dist\themes\default\assets\fontsicons.woff2
[17:00:27] Created: dist\themes\default\assets\fonts\outline-icons.eot
[17:00:27] Created: dist\themes\default\assets\fonts\outline-icons.svg
[17:00:27] Created: dist\themes\default\assets\fonts\outline-icons.ttf
[17:00:27] Created: dist\themes\default\assets\fonts\outline-icons.woff
[17:00:27] Created: dist\themes\default\assets\fonts\outline-icons.woff2
[17:00:27] Created: dist\themes\github\assets\fonts\octicons-local.ttf
[17:00:27] Created: dist\themes\github\assets\fonts\octicons.svg
[17:00:27] Created: dist\themes\github\assets\fonts\octicons.ttf
[17:00:27] Created: dist\themes\github\assets\fonts\octicons.woff
[17:00:27] Created: dist\themes\material\assets\fontsicons.eot
[17:00:27] Created: dist\themes\material\assets\fontsicons.svg
[17:00:27] Created: dist\themes\material\assets\fontsicons.ttf
[17:00:27] Created: dist\themes\material\assets\fontsicons.woff
[17:00:27] Created: dist\themes\material\assets\fontsicons.woff2
[17:00:27] Finished 'Building Assets' after 181 ms
[17:00:27] Finished 'build-assets' after 184 ms
[17:00:27] Finished 'build' after 14 s

[lubber-de]

Strange, because 2.8.6 (in comparison to 2.8.5) does not seem to have any change which could lead into your described issue.
However, in 2.8.5 there is the new feature for only create individual components #1385
Are you using this?

If not, could you please post your semantic.json and its location? My guess is, it's in C:\fomantic-ui\semantic and i also guess your semantic folder is the cloned git repo?

Also in 2.8.5 we had a change by #1467 which looks for a semantic.json in the current workdir.
I am unsure if that could be some reason for your behavior

Are you using gulp watch tasks?

Could you try a clean install of fomantic 2.8.5 and 2.8.6 to find out if your issue maybe also happens with 2.8.5 (or also _not_ with 2.8.6 with a clean install?

[batata004]

Thanks for checking this out! I am not using the individual components, nothing fancy :)

The steps I took to reproduce this bug is:

cd C:\fomantic-ui
npm install fomantic-ui -> [I pressed ENTER on all default questions]

Then I added the specific components I need to the C:\fomantic-ui\semantic.json file, and the content of that file is:

{
"base": "semantic\",
"paths": {
"source": {
"config": "src/theme.config",
"definitions": "src/definitions/",
"site": "src/site/",
"themes": "src/themes/"
},
"output": {
"packaged": "dist/",
"uncompressed": "dist/components/",
"compressed": "dist/components/",
"themes": "dist/themes/"
},
"clean": "dist/"
},
"permission": false,
"autoInstall": false,
"rtl": false,
"version": "2.8.6",
"components": [
"reset",
"site",
"button",
"form",
"menu",
"message",
"dimmer",
"modal",
"popup",
"transition"
]
}

After that I executed:

cd C:\fomantic-uisemantic
npx gulp build

And the output was:

[18:04:09] Using gulpfile C:\fomantic-uisemanticgulpfile.js
[18:04:09] Starting 'build'...
Building Semantic
[18:04:09] Starting 'build-css'...
[18:04:09] Starting 'Building uncompressed CSS'...
[18:04:09] Starting 'Building compressed CSS'...
[18:04:10] Created: distcomponents\reset.css
[18:04:10] Created: distcomponents\reset.min.css
[18:04:12] Created: distcomponents\site.css
[18:04:12] Created: distcomponents\site.min.css
[18:04:14] Created: distcomponents\button.css
[18:04:14] Created: distcomponents\button.min.css
[18:04:15] Created: distcomponents\form.css
[18:04:15] Created: distcomponents\form.min.css
[18:04:16] Created: distcomponents\menu.css
[18:04:16] Created: distcomponents\menu.min.css
[18:04:17] Created: distcomponents\message.css
[18:04:17] Created: distcomponents\message.min.css
[18:04:18] Created: distcomponents\dimmer.min.css
[18:04:18] Created: distcomponents\dimmer.css
[18:04:19] Created: distcomponents\modal.css
[18:04:19] Created: distcomponents\modal.min.css
[18:04:20] Created: distcomponents\popup.min.css
[18:04:20] Created: distcomponents\popup.css
[18:04:21] Created: distcomponents\transition.min.css
[18:04:21] Finished 'Building compressed CSS' after 11 s
[18:04:21] Created: distcomponents\transition.css
[18:04:21] Finished 'Building uncompressed CSS' after 11 s
[18:04:21] Starting 'Packing uncompressed CSS'...
[18:04:21] Starting 'Packing compressed CSS'...
[18:04:22] Created: distsemantic.css
[18:04:22] Finished 'Packing uncompressed CSS' after 1.27 s
[18:04:22] Created: distsemantic.min.css
[18:04:22] Finished 'Packing compressed CSS' after 1.28 s
[18:04:22] Finished 'build-css' after 13 s
[18:04:22] Starting 'build-javascript'...
[18:04:22] Starting 'Building un/compressed Javascript'...
[18:04:22] Created: distcomponents\form.js
[18:04:23] Created: distcomponents\dimmer.js
[18:04:23] Created: distcomponents\form.min.js
[18:04:23] Created: distcomponents\modal.js
[18:04:23] Created: distcomponents\dimmer.min.js
[18:04:23] Created: distcomponents\popup.js
[18:04:24] Created: distcomponents\modal.min.js
[18:04:24] Created: distcomponents\transition.js
[18:04:24] Created: distcomponents\popup.min.js
[18:04:24] Created: distcomponents\site.js
[18:04:24] Created: distcomponents\transition.min.js
[18:04:24] Created: distcomponents\site.min.js
[18:04:24] Finished 'Building un/compressed Javascript' after 2.07 s
[18:04:24] Starting 'Packing uncompressed Javascript'...
[18:04:24] Starting 'Packing compressed Javascript'...
[18:04:25] Created: distsemantic.js
[18:04:25] Finished 'Packing uncompressed Javascript' after 1.3 s
[18:04:25] Created: distsemantic.min.js
[18:04:25] Finished 'Packing compressed Javascript' after 1.3 s
[18:04:25] Finished 'build-javascript' after 3.37 s
[18:04:25] Starting 'build-assets'...
[18:04:25] Starting 'Building Assets'...
[18:04:25] Created: dist\themes\basic\assets\fontsicons.eot
[18:04:25] Created: dist\themes\basic\assets\fontsicons.svg
[18:04:25] Created: dist\themes\basic\assets\fontsicons.ttf
[18:04:25] Created: dist\themes\basic\assets\fontsicons.woff
[18:04:25] Created: dist\themes\default\assets\fonts\brand-icons.eot
[18:04:25] Created: dist\themes\default\assets\fonts\brand-icons.svg
[18:04:25] Created: dist\themes\default\assets\fonts\brand-icons.ttf
[18:04:25] Created: dist\themes\default\assets\fonts\brand-icons.woff
[18:04:25] Created: dist\themes\default\assets\fonts\brand-icons.woff2
[18:04:25] Created: dist\themes\default\assets\fontsicons.eot
[18:04:25] Created: dist\themes\default\assets\fontsicons.svg
[18:04:25] Created: dist\themes\default\assets\fontsicons.ttf
[18:04:25] Created: dist\themes\default\assets\fontsicons.woff
[18:04:25] Created: dist\themes\default\assets\fontsicons.woff2
[18:04:25] Created: dist\themes\default\assets\fonts\outline-icons.eot
[18:04:25] Created: dist\themes\default\assets\fonts\outline-icons.svg
[18:04:25] Created: dist\themes\default\assets\fonts\outline-icons.ttf
[18:04:25] Created: dist\themes\default\assets\fonts\outline-icons.woff
[18:04:25] Created: dist\themes\default\assets\fonts\outline-icons.woff2
[18:04:25] Created: dist\themes\default\assetsimages\flags.png
[18:04:25] Created: dist\themes\github\assets\fonts\octicons-local.ttf
[18:04:25] Created: dist\themes\github\assets\fonts\octicons.svg
[18:04:25] Created: dist\themes\github\assets\fonts\octicons.ttf
[18:04:25] Created: dist\themes\github\assets\fonts\octicons.woff
[18:04:25] Created: dist\themes\material\assets\fontsicons.eot
[18:04:25] Created: dist\themes\material\assets\fontsicons.svg
[18:04:25] Created: dist\themes\material\assets\fontsicons.ttf
[18:04:25] Created: dist\themes\material\assets\fontsicons.woff
[18:04:25] Created: dist\themes\material\assets\fontsicons.woff2
[18:04:25] Finished 'Building Assets' after 172 ms
[18:04:25] Finished 'build-assets' after 175 ms
[18:04:25] Finished 'build' after 16 s

[batata004]

Could you try a clean install of fomantic 2.8.5 and 2.8.6 to find out if your issue maybe also happens with 2.8.5 (or also _not_ with 2.8.6 with a clean install?

I just did that right now, and the individual files for all components were generated in the 2.8.5 version!

[lubber-de]

You said, your semantic.json is is located in the parent folder at c:\fomantic-ui\semantic.json
Could you please try to put the semantic.json at c:\fomantic-ui\semantic\semantic.json instead and run npx gulp build from that folder?

The only difference in 2.8.6 i can spot is the change in #1497 🤔

[batata004]

Changing the location of the semantic.json file made the build process much much faster! I dont know why! But it still didnt create all the files of all components, just the components I specified. But my friend, this is not problem, I decided to import those files from CDNJS. So I will just build my custom semantic.min.js||css files and import the other components directly from CDNJS just when I need! This solved my issue, despite the new behaviour of building is different from previous version. HOWEVER I think that this new behaviour is better cause it does not build all the components, only the ones needed and makes the building process faster!

C:\Windows\system32>cd C:\fomantic-uisemantic

C:\fomantic-uisemantic>npx gulp build
[18:18:12] Using gulpfile C:\fomantic-uisemanticgulpfile.js
[18:18:12] Starting 'build'...
Building Semantic
[18:18:12] Starting 'build-css'...
[18:18:12] Starting 'Building uncompressed CSS'...
[18:18:12] Starting 'Building compressed CSS'...
[18:18:13] Finished 'Building uncompressed CSS' after 44 ms
[18:18:13] Finished 'Building compressed CSS' after 45 ms
[18:18:13] Starting 'Packing uncompressed CSS'...
[18:18:13] Starting 'Packing compressed CSS'...
[18:18:13] Finished 'Packing uncompressed CSS' after 25 ms
[18:18:13] Finished 'Packing compressed CSS' after 25 ms
[18:18:13] Finished 'build-css' after 75 ms
[18:18:13] Starting 'build-javascript'...
[18:18:13] Starting 'Building un/compressed Javascript'...
[18:18:13] Finished 'Building un/compressed Javascript' after 12 ms
[18:18:13] Starting 'Packing uncompressed Javascript'...
[18:18:13] Starting 'Packing compressed Javascript'...
[18:18:13] Finished 'Packing uncompressed Javascript' after 11 ms
[18:18:13] Finished 'Packing compressed Javascript' after 11 ms
[18:18:13] Finished 'build-javascript' after 27 ms
[18:18:13] Starting 'build-assets'...
[18:18:13] Starting 'Building Assets'...
[18:18:13] Finished 'Building Assets' after 3.22 ms
[18:18:13] Finished 'build-assets' after 4.73 ms
[18:18:13] Finished 'build' after 110 ms

[ko2in]

Shouldn't it work the way like that? I've tested with my fork repo which is version 2.7.4 and it builds only the components that describe in semantic.json file.

I copied your specifications from your JSON file and I got only these components in dist/component directory.

As far as I know, it've been working like that before.

[batata004]

@ko2in I just double checked and installed again the 2.8.5 (I already had done that as per request of @lubber-de a few hours ago) and I got all the components built! I am running WIN10 (I updated it yesterday to May 2020 update) but I think my SO is not a problem cause in the past, when I built the components, it generated all of them. I even looked on 3 other websites that I built at the end of May and all of them have all components built in the /dist despite selecting only a few of them in the semantic.json file.

Anyway, if the intended way is NOT generate all components, then that's how it's happening on my machine now with 2.8.6 version!

[ko2in]

@batata004 I've tested several times, and found no differences. Here's what I did with version 2.7.4:

• npm install [email protected]
• Install with all default configs and all components, and ran npx gulp build.
• Now, I got all components in /dist/components directory.
• I edited semantic.json file to add only the components like yours.
• I deleted all files inside /dist/components directory. Then, I ran npx gulp build.
• It built the only components that describe in semantic.json file.

If I didn't delete the components that were previously built, they keep remaining even though they are not in semantic.json file. It's the same as I specified what components to be installed in the installation setup.

As far as I know, it's been working like that in all previous versions. Not only 2.8.6. Can you check with your older version like above steps?

Not sure how did you install 2.8.6. Did you specify these components since installation? Or you installed with all components and then edited semantic.json file and then it built only the components but, remove the other components automatically?

@lubber-de Can you confirm that it's working like that?

[batata004]

@ko2in I did exactly the same as you did, and I also tried a "random" version 2.7.2 and the behaviour was the same: all minified and non minified versions were created in the /dist directory BUT the semantic.min.js and semantic.min.css files contained only the specified components. PS: I always delete the /dist directory before building, however I realize that the files are automatically deleted even if I dont do that. I came to that conclusion doing this: I made a build and waited the files being created. After that I opened a random file (like checkbox.min.js) and changed the contents. Then I built it again. When I open the checkbox.min.js file, the contents were changed (it means that what I had changed previously was removed and the new content overwrited my content).

I knew that this would happen, cause I build custom Fomantic files for a while using this computer and this always happened. But since you reported doing the same and having different results than me, I went to my wife's computer and installed everything there. When I built the Fomantic, the behaviour was exactly as YOU described (not me!).

So I was wondering: what did I do in my computer that may have changed some default configuration? I had no idea, cause I am not an advanced user of npm and such. So I removed node from my computer, restarted, installed everything again and boom, it worked exactly as you said @ko2in !!!

So, there should be some configuration that I may have messed up or setted on node that changed it's behaviour. I usually build lots of other libraries with node and maybe something in some library made some change to my configurations on node.

Anyway, I apoligize for taking so long of your time guys, and I can clearly confirm that I was doing something weird and the new version works exactly as latest in terms of build process!

BTW I loved the granularity that the transition customization brought to this build. Thanks a lot @lubber-de !!!