Semantic-ui: gulp build is not building semantic.min.css

[nestorvanz]

In a fresh installation i am running "gulp build" but in the "dist" folder is not present semantic.min.css, theres only the semantic.min.js, "components" and "themes" folder.

[novalevel]

I also have this issue

[himanshu230]

I had the same issue
I solved it by changing the build-css gulp task.
In file tasks/build/css.js in semantic folder, remove the following line
compressedStream = stream.pipe(clone());

[nestorvanz]

What are the changes that you made? @himanshu230

[himanshu230]

@nestorvanz There is a file /tasks/build/css.js. Search for line
compressedStream = stream.pipe(clone());
Removing that line seems to solve the issue.
It might be because later on, compressedStream is again set, which means that this clone stream is not piped to anything, creating backpressure.

[jjshammas]

Hmm…that file hasn't changed since July 2016…

[Rex90]

Been trying to figure out what I'm doing wrong all morning. Is this an issue with the semantic-ui release?

[hammy2899]

@Rex90 This problem started after an update for gulp-clone was released.

I made a pull request this morning with a fix so hopefully it gets merged. You can do a temporary fix by commenting out a line as @himanshu230 mentioned in his comment.

[fsworld009]

I manually changed gulp-clone to 1.0.0 and remove that line as @himanshu230 suggested but still cannot get any css file after gulp build command. Any idea?

Both Semantic UI (2.2.13) and gulp CLI (3.9.1) are the latest.

EDIT: never mind, I was messing around with theme.config and forgot to revert it back, looks like gulp won't show any error message when there is error in theme.config

[specimen151]

Not a fix, but:
I have found that it might have something to do with the file size. At least these are my findings:

Editing semantic.json, the "components" array, and removing e.g. half of the components will build the css with no problem. Test with gulp build-css. You can remove whichever components you want (removing one is not enough), so that's why I think it has something to do with the total size of if.

[fsworld009]

@specimen151 I think it might also because you forgot to specify the theme for certain components (or you put an invalid theme name?) in theme.config but you included those components in "components" array, which causes the build script fail. At least for me I am able to build all components into one css file.

[specimen151]

@fsworld009 Could be, however I if I change the gulp-clone version to 1.0.0 or uncomment the clone line, like suggested above, it all works. And it also worked fine (clean install, no modifications) two weeks ago. I looked at the new gulp-clone, and there has been many changes there to the underlying dependencies. Maybe they don't work the same.

And also I am (w/o any mods) able to build all components, but not all at the same time. E.g. I specify the first half of the list of every component, builds fine. Then I replace with the second half of the list (of every component) and it builds fine. But when I have like 70% or more of the complete list of components, it seems like there is some buffer that's full or something, because it won't build, and it doesn't matter which components I remove... Anyway the above suggestions/pull-requests works for me.

[truesteps]

So, how is this coming along? Any fix without actually modifying the source files in npm? Can I somehow force the package to use gulp-clone 1.0.0??

[specimen151]

Is @himanshu230 's fix of removing compressedStream = stream.pipe(clone()); maybe better than staying with the old version of gulp-clone? The stream is set to a new stream just a few lines down anyway, so it seems unnecessary.

[truesteps]

I fixed this by generating a npm shrinkwrap with the gulp clone version 1.0.0 fixed the issue for me @specimen151 this might help you, change the version of gulp-clone in semantic-ui package.json from ^1.0.0 to 1.0.0 in node_modules, generate a npm shrinkwrap (basically a package-lock with locked versions of packages and their dependencies), npm install inside semantic-ui folder in node_modules than you just do a clean npm install in the root folder of your projects package.json and it will generate a shrinkwrap with the correct version. From what i've read npm install first looks into shrinkwrap before installing and installs the versions specified inside shrinkwrap

[disrupticons]

A cleaner fix IMO would be to simply install gulp-clone 1.0.0 as a dependency for your project, till a fix is released. This will replace the newer v1.1.1 that was installed by default.

npm i [email protected] --save-exact

[truesteps]

@disrupticons true, i tried installing the dependency myself and reinstalled modules and it didn't work but seems like I just forgot to delete something and it didn't build really well, this is a much better solution

[jayphelps]

This was fixed upstream in https://github.com/mariocasciaro/gulp-clone/issues/7 and https://github.com/mariocasciaro/gulp-clone/pull/8. Released as gulp-clone 1.1.3.

You may have to blow away your node_modules to pick it up.

[specimen151]

So the issue could be closed then? Maybe @nestorvanz must do it?

[hammy2899]

I can confirm the new gulp-clone update did fix this. I am also going to close my PR.

[jlukic]

I've updated the project's package.json so it should fix any stale node_modules

[jjshammas]

In gulp-clone v2+, this seems to happen again!

[jayphelps]

@jjshammas that's correct. The change they did was shifted from breaking 1.0 to 2.0. Semantic still uses v1 https://github.com/Semantic-Org/Semantic-UI/blob/5b681ca84e756d0d6080ecc6a3e2cdd40c0e3d50/package.json#L58

[chaseholdren]

Would someone mind adding the version constraint to the gulp-clone peer dependency as well?

[coffeeowl]

in a desperate attempt to build another theme I forked the whole repo, set gulp-clone to 1.1.3 and still no css files...

[j-cong]

@jlukic Looks like this problem is back, as "gulp-clone": "^2.0.1", was updated. Shouldn't this issue be reopened?

[rsbepvb]

Having the same problem.

[Coteh]

Was just having the same issue as well, and the change applied in himanshu230's PR (#6631) fixes the problem for me.

[dankythuat]

Was just having the same issue as well, and the change applied in himanshu230's PR (#6631) fixes the problem for me.

yep, me too,

[dankythuat]

How to import semantic.min.js i get error at line 11.
after that, i install jquery and import in index.js but nothing works
import * as $ from "jquery"
import "./semantic/dist/semantic.min.js"

[bugproof]

this issue should be re-opened

[riez]

yeah i got same problem, its doesnt build semantic.min.css

[jlukic]

Fixed in 2.4.2 patch

[seunoyebode]

I have the same problem "gulp build" doesn't build semantic.min.css and semantic.min.js

[hammy2899]

@seunoyebode Please provide some more info like node, npm and SUI version.

[seunoyebode]

@hammy2899 Node v8.11.4 npm 5.8.0 gulp CLI version 2.0.1 local version 3.9.1

[hammy2899]

@seunoyebode Is this a new installation or an old instance?

The following worked for me

$ node -v && npm -v
v8.11.4
5.6.0
$ mkdir sui-test && cd sui-test
$ npm init -y
$ npm install --save semantic-ui
$ cd semantic
$ npx gulp build

Try running the commands above in a separate directory and see if that works.

[seunoyebode]

Thanks @hammy2899 That worked. Although i had to install npx. It's working now.

By the way i think the getting started guide should be more explicit @jlukic

Thanks you guys are doing a great job. I'm ditching Bootstrap!!!

[hammy2899]

@seunoyebode good to hear 🙂

Note: npx comes installed by default with [email protected] or greater