[Build] Add Quiet Option

[mendenhallmagic]

First, I just wanted to say thanks for this promising new release. Your dedication to this project is amazing and inspiring. I'm really excited to simplify and speed up our build using the new semantic.less file...

I just have one obstacle to upgrading:

My team has a jenkins build process, so running running npm install with a fresh (empty) node_modules directory is a use-case we have to support. Since the new release runs gulp install without a default semantic.json, user interaction seems to be required to advance the process. The way I got around this before was to npm install, copy a default semantic.json from our project root into the node_modules/semantic-ui, copy the semantic-ui/src/_site folder to the semantic-ui/src/site folder, copy site.variables from our project into semantic-ui/src/site/globals, then run gulp build.

Is there currently a way to run npm install without requiring user interaction?

[jlukic]

It probably wouldnt be too difficult to add since build scripts have config data available.

Would just require modifying package.json to include some extra flag. https://docs.npmjs.com/files/package.json#config

Will brainstorm on this

[kapouer]

seconded ! i also note that installing semantic-ui now pulls shitloads of gulp modules - this is not so friendly, as not everybody is keen using gulp.

[mendenhallmagic]

Based on my initial testing, it looks like npm config variables do not cascade, so this may not be an option :/

Is there a reason why semantic-ui runs gulp install automatically? Users of the gulp build system would probably be alright with taking the extra step to run gulp install themselves...do you agree?

[jlukic]

@kapouer I will be creating separate repos/distributions for LESS/JS only and CSS/JS only, these will shadow the main repo and reduce file size for those who want to roll their own build system.

@mendenhallmagic The issue is they'd have to run gulp install from inside node_modules/semantic-uiwhich is unusual.

[jlukic]

@mendenhallmagic

It's worth noting that if theres a semantic.json in your project root that points to an install. NPM will skip install questions. Can you just include that with your CI instances?

[kapouer]

@jlukic thank you for the semantic-ui-css and al. repos ! great !

[jlukic]

I think having a semantic.json in your project root should solve all issues with needing quiet version of install, @mendenhallmagic can you confirm you have everything working?

[mendenhallmagic]

Currently, it seems that not only the semantic.json in project root is required, but also the entire custom build system (projectroot/semantic by default) is the minimum required structure to run "npm install semantic-ui" without user interaction. I would consider this less than ideal...

However, I jumped on over to using semantic-ui-less, which doesn't have these requirements. Thanks for this! FWIW, we can close this issue, but I would like to bring up a related issue. Let me know if I should open up another issue to begin this discussion:

My current workflow is still less than ideal, coming from using bootstrap, whose project's goals/philosophy are admittedly different (e.g. the standard one scope of variables). I'm still in the camp that prefers to import one less file from npm/bower, import local variables and rules file(s) for customization.

My current build process still has a few too many steps, IMO:

1. copy _site to site in node_modules
2. copy theme.config, semantic.less (whose contents are the same as src/semantic.less in the semantic-ui package), site/, and themes/default (to be renamed and used in theme.config) into node_modules from my project/styles/semantic folder
3. run lessc on project/styles/semantic/index.less which imports node_modules/semantic-ui-less/semantic.less

It might be worth noting that I share *.variables between my project's less structure and semantic's, so that I can use the base font size, etc. in my project's less structure, which is a big reason for even building semantic in less in the first place, second to powerful customization of semantic itself.

I would consider the ideal workflow to have the package already have 1 & 2 done for the consumer of the framework, as it seems like a reasonable default to me. If the user wants to customize or use different themes, then either perform the workflow above on semantic-ui-less, or, perhaps more appropriately, npm install semantic-ui. I'm new to this project, so I don't know if any of this goes against its goals/philosophy...let me know what you think!

[mendenhallmagic]

Oops, I misclicked the close button...oh well I might open a new issue regarding a lower barrier to entry (from other less frameworks)...would like to hear/read some initial thoughts you might have though.

To make things more concrete, I am asking if it makes sense to have a site (not _site) folder, theme.config, and semantic.less in semantic-ui-less.

[kapouer]

@mendenhallmagic i have a similar workflow but it's a bit simpler because i symlink files from node_modules/semantic-ui-css to the place where the project need them. It makes updates simpler.

[mendenhallmagic]

Ah, good idea! I'll look into that.

[jessy1092]

It still needs to interactive after adding semantic.json. It still cannot work with Travis-ci. Any other solution?

[mendenhallmagic]

Did you add the semantic/ folder to your project and point semantic.json to that?

[jessy1092]

OK, I see. I need to add semantic-ui source code to the semantic/ folder in my project first and point to that. Thanks.

[marcgibbons]

I'm experiencing problems with this as well, upgrading from version 1.8. In my build process, I copy pre-configured semantic.json and theme.config files into semantic and run gulp build without ever needing to run gulp install as a build step on my CI server.

It looks like gulp install was introduced as an npm installation step in e3d8766078b00f17ed28152905b8503c402fc5fb and is now part of the npm install script: https://github.com/Semantic-Org/Semantic-UI/blob/master/package.json#L17

Taking this line out prevents gulp install from running when installing packages.

@jlukic Would you be open to removing this from package.json and have users manually run gulp install as part of a configuration step? Otherwise, we're prompted every time npm install is run which is not desirable.

Many thanks for all the great work! This is a fantastic project.

(Also worth noting, I was reading NPM docs and they discourage using install scripts altogether: https://docs.npmjs.com/misc/scripts#note-install-scripts-are-an-antipattern)

[jlukic]

@marcgibbons

I'll try to give a bit of background this might be a bit verbose. npm install and npm update both hit the post-install script.

Things were moved to post-install scripts for several reasons talked about previously #1385. PMs like bower and NPM treat their folders like big temp directories, which doesnt work well for projects like ours that have user files. Using gulp install as a post install step would require cding into node_modules/semantic-ui which is a no no, and convolutes the process.

The post-install script walks up your dir path looking for your root folder and a semantic.json file in your root folder.

It then looks for the paths specified in your semantic.json file to see if semantic is installed. If it is it only runs upgrade scripts and only if the packaged version is a higher version than the installed version specified in semantic.json's version property.

If a semantic.json is found, and version matches version then it will do nothing. If a semantic.json file is found and there are no files at the specified location, it'll do nothing. The interrogative installer only runs if semantic.json is not found.

If anyone was curious why some packages are listed as dependencies and peerDependencies its because post-install run before peerDependencies are resolved, meaning you cant assume they are available when running post-install scripts, dependencies however will be resolved before the script runs.

[marcgibbons]

@jlukic Thanks for the explanation. Managed to get this working exactly as you described.

What I was doing was cd'ing into the semantic repo (which I installed in my project using bower) and ran npm install from there. I'll update my build steps.

What I'm looking to / continue do is only commit the site folder, semantic.json and theme.config to version control and let bower or npm manage the rest. Basically I want the code devs will work on to be separate from SUI core (themes, definitions). Right now, I'm putting the site dir at the top level of the project, in isolation of the rest of the source. Any thoughts on best practices?

Thanks for all the hard work!

[jlukic]

Yeah, that sounds alright for site/, packaged themes and definitions kind of have to stay put.

The default gulpfile is created in /semantic/ but you can copy it to your root path and just modify the paths to the tasks.

[gabro]

Hi, I'm still having issues with this. I ship my repo with a semantic.json, and a semantic folder containing only src/theme.config and a custom theme under src/themes/mytheme. Now, whenever I perform an npm install it hangs because it's requiring user interaction.

I don't want to version the whole semantic in my project, as it's a dependency, so I would really really appreciate a --quiet option for the installer.

Thoughts, @jlukic ?

[nicbarker]

Hi guys, Please point out if this is a horrible hack, but it seems that you can get semantic to skip the built in installer by just including an empty src/definitions directory. Before installing semantic, our project setup looks like this:

semantic/
    src/
        definitions/ <-- empty
    themes/
        manageflitter/    
    theme.config

i.e we've got a theme.config, a theme folder for our semantic theme "manageflitter", and an empty src/definitions folder to prevent the interactive installer from running.

There are two gitignore files to prevent the whole of semantic from being committed: semantic/.gitignore

gulpfile.js
tasks
src/site
src/*.less
src/themes/*
!src/themes/manageflitter
!src/themes/manageflitter/*
dist
README.md

And another inside the src/definitions to keep the folder committed but empty: semantic/src/definitions/.gitignore

*
!.gitignore

We then use the following gulp task "semantic:install" to move the files from the node_modules to the right place. It copies across directories, then runs semantic's own built in installer, similar to what @mendenhallmagic is using by the sounds of things:

// -------------------------------------------------------------
// Task gulp semantic:install is for installing
// the semantic UI components.
// -------------------------------------------------------------

function buildSemantic(callback) {
    var child_process = require('child_process');
    // Run semantic UI's gulp installer
    var child = child_process.spawn('./node_modules/.bin/gulp', ['--gulpfile', './semantic/gulpfile.js', 'build'], []);
    // Pipe the stdout of the child process so we can see it on the command line
    child.stdout.setEncoding('utf8');
    child.stdout.on('data', function (data) {
        process.stdout.write(data);
    });
    // Pipe the stderr of the child process so we can see it on the command line
    child.stderr.setEncoding('utf8');
    child.stderr.on('data', function (data) {
        process.stderr.write(data);
    });
    child.on('exit', function () {
        callback();
    });
}

// Manually install the semantic-ui components
gulp.task('semantic:copy', function () {
    return gulp.src([
        './node_modules/semantic-ui/src/**/*',
        '!./node_modules/semantic-ui/src/theme.config.example',
        './node_modules/semantic-ui/tasks/**/*',
        './node_modules/semantic-ui/gulpfile.js',
        './node_modules/semantic-ui/node_modules/**/*'
    ], {base: './node_modules/semantic-ui'})
        .pipe(gulp.dest('./semantic/'));
});

// Copy the _site folder to site
gulp.task('semantic:rename:site', ['semantic:copy'], function () {
    return gulp.src(['./semantic/src/_site/**/*'])
        .pipe(gulp.dest('./semantic/src/site'));
});

// Delete the _site folder
gulp.task('semantic:clean', ['semantic:rename:site'], function (callback) {
    rimraf('./assets-raw/semantic/src/_site', callback);
});

gulp.task('semantic:install', ['semantic:clean'], function (callback) {
    buildSemantic(callback);
});

Again please let me know if this is a horrible way to do it, love the framework and as always trying to find better ways to build / use it.

[davidtwco]

Hi everyone,

Wanted to add this is also an issue when using technologies like Docker as automated builds from Dockerfiles will hang on an npm install.

Great project, thanks for all the hard work.

[trigoesrodrigo]

I use this inside a jenkins script.

npm install <<EOF
yes

yes

EOF

It just simulates the keypresses needed in the installation.

Hope it helps. El 22/7/2015 6:11 p. m., "David Wood" notifications@github.com escribió:

Hi everyone,

Wanted to add this is also an issue when using technologies like Docker as automated builds from Dockerfiles will hang on an npm install.

Great project, thanks for all the hard work.

— Reply to this email directly or view it on GitHub https://github.com/Semantic-Org/Semantic-UI/issues/1816#issuecomment-123774647 .

[jlukic]

Working on this currently in branch fix-install

[jlukic]

@trigoesrodrigo @DavidTWco

Can anyone try installing against next branch and see if your issues are resolved?

It should no longer ask any questions if you have a semantic.json file.

npm install Semantic-Org/Semantic-UI#next

[davidtwco]

I can give it a go tomorrow when I'm in work and let you know.

Thanks again.

[trigoesrodrigo]

Hi.

I've tried:

• semantic.json only => asks questions
• semantic.json and theme.config => asks questions
• semantic.json, theme.config and definitions folder (intact) => doesn't ask questions, but the installation is left incomplete (no gulpfile, no tasks, no themes folder, no site folder, no less files)

I could only test it under Windows 8, tomorrow I'll try on a Mac.

Currently in my CI workflow I'm using the aforementioned bash snippet and in my repo I'm only keeping the semantic.json, the theme.config and my overrides. I still haven't tried with the 2.x branch, but the 1.x branch is working flawlessly with that hacky solution.

[davidtwco]

I looked to try and check your commit to see if you'd already considered this but couldn't find it. I think that the gulp build command should also have a quiet option as that would be part of the build process as well.

Like I said, I'll give the changes a go tomorrow and see if I can get it working.

Thanks again for all your hard work, it's much appreciated.

[jlukic]

Instead of waiting to get this all in one go, I'm going to launch with current build fixes today as 2.0.7 and keep working on this.

[sgarbesi]

So what exactly was the fix for this? I have the same problem; we use Jenkins for automated testing/builds, the prompt needs to be bypassed.

Along with this premise, in our case we don't even need the semantic.json file or semantic folder. All we simply want is the dist compilations from the project. Is this possible? No need to install gulp and all the other build dependencies.

[elldritch]

@sgarbesi sounds like you might want semantic-ui-css instead.

Still, +1 for this issue. The need for interactivity is blocking my build, because I need to do automated pushes to OpenShift servers. If at all possible, I would really prefer not to commit the entire semantic/ folder into source control.

My preferred flow would be:

• If semantic.json exists, gulp install as using those settings
• Otherwise, gulp install using defaults and generate a default semantic.json
• If someone needs to use non-default settings (like I do), they should modify their semantic.json and just do another gulp install themselves. When they do an automated push, npm install semantic-ui will read their semantic.json anyway and preserve those custom settings

[sgarbesi]

@ilikebits I didn't realize the JS was bundled in the CSS repo. This works for me. Thanks.

[elldritch]

@sgarbesi Try bower install semantic-ui; it should pull up the latest compiled version in its dist.

[jlukic]

This has been added with 2.1.9, see PR #3616

[ramiel]

version: next (commit #cb0c26d)
Looks like that, with autoInstall: true already present in semantic.json file, this precondition are required in order to have npm install to work:

• Presence of folder semantic/src/definitions
• Presence of file semantic/src/theme.config
• Absence of parameter version in semantic.json

[websemantics]

This took my a while to get right .. so here's an example with a working setup, https://github.com/websemantics/pyrocms-cheatsheet

Check-out method prepare inside scripts.sh, .. this automatically generates the folders/files expected for a quiet Semantic-ui install.

Also, notice that .gitignore lists /semantic & semantic.json to be ignored.

This seems to work perfectly with Travis,

[jeffersd]

A workaround that I learned was piping my keystrokes to npm install: echo -ne '\n \n \3033[1B\nsemantic/\n' | (npm install)

\3033[1B\n is one down arrow followed by 'return'. The third prompt I'm given when installing doesn't auto select an option, so I have to use an arrow key.

[carlosgoce]

On top of that, ¿it is possible to install semantic-ui without gulp?

I already have my asset pipeline (using Laravel-Mix which uses webpack) and I just want the semantic-ui .less and .js files, I will include the files one by one when I need them.

I could install semantic-ui-less, but what about the JS files?

Any workaround? I find it pretty dirty to install all the gulp plugins when I am not going to use them.

Thank you