Semantic UI in .gitignore

Question

I recently started experimenting with Semantic UI. I am using it in a project that I keep in git repo.

I added the Semantic files to the semantic folder in the project root with all the default settings. I may or may not change these settings later.

My question is, how do I properly add the folder to git? I do not want to add files that can later be simply rebuilt using gulp, if that is possible. What files should I add and what should I ignore?

Answer 1

With reference to your own answer, I have a similar but slightly different approach that may require an additional hacky little step but keeps the repo a lot cleaner.

My .gitignore looks like this:

node_modules
semantic/dist/*
semantic/gulpfile.js
semantic/src/definitions
semantic/src/semantic.less
semantic/src/theme.less
semantic/src/themes
semantic/tasks
!semantic/dist/semantic.min.css
!semantic/dist/semantic.min.js

So, the main thing that's different from your solution is that I additionally ignored files inside the src/ directory, like the definitions and all those themes.

But: You have to do the Semantic setup after cloning the repo. And: That may overwrite your semantic.json so you will need to revert that change – the hacky step I mentioned earlier.

Those two dist files are included for cases when Semantic just is to be used, without the need of changing anything.

Answer 2

I ended up partially following @fstanis's answer at How can I separate generated artifacts from the main build with semantic UI?, linked by @poke.

I kept:

• semantic.json
• semantic/src/
• semantic/gulpfile.js (As I do not use gulp elsewhere in the project)

I ignored:

• semantic/dist/
• semantic/tasks/, as it is exactly the same as node_modules/semantic-ui/tasks and therefore can be copied

I also augmented semantic/gulpfile.js as follows to check if semantic/tasks is present and copy it there if not.

/* Very top of semantic/gulpfile.js */
var fs = require('fs-extra'); // Used for recursive copying
var path = require('path');
try {
    var stat = fs.statSync(path.join(__dirname, './tasks'));
    console.log('\'tasks\' folder already exists. Continuing.')
} catch (e) {
    console.log('Copying \'tasks\' folder from \'node_modules/semantic-ui/tasks\'');
    fs.copySync(path.join(__dirname, '../node_modules/semantic-ui/tasks'), path.join(__dirname, './tasks'));
    console.log('Copying done! Continuing.');
}

This seems to be the minimum needed for a buildable Semantic UI installation.