npm - How can I separate generated artifacts from the main build with semantic UI?

Question

I am trying to figure out how to integrate Semantic UI with my gulp-based frontend toolchain.

The npm artifact semantic-ui includes an interactive installer that will write a semantic.json file to the root of my project and install the less files, gulp tasks and some configuration into my project. All of these files will be put in subdirectories of a single base directory specified in semantic.json.

I do not want any dependency implementation files or any generated files in the git repository for my project because this will pollute revision history and lead to unneccessary merge conflicts. I would very much prefer to provide semantic.json only and .gitignore the semantic base directory. On npm install, the Semantic installer should install everything to the base directory specified in semantic.json. When building, I want the artifacts generated into a separate dist directory that does not reside under the semantic base directory.

However, if I do this, the installer will fail with a message stating that it cannot find the directories to update and drop me into the interactive installer instead. This is not what I want, because it means my build is no longer non-interactive (which will cause the CI build to fail).

How can I integrate Semantic UI into my build without having to commit Semantic and its generated artifacts into my git repository?

Answer 1

This is what we did in our similar scenario. The following are true:

• Everything Semantic UI generates is in .gitignore. Therefore, the only Semantic UI files we have in our repo are:
  • semantic.json
  • semantic/src folder (this is where our theme modifications actually are)
  • semantic/tasks folder (probably doesn't need to be on git, but since it's needed for building, everything is simpler if we keep it in our repo)
• We never need to (re)run the Semantic UI installer, everything is integrated in our own gulpfile.js.
• Semantic UI outputs in our assets folder which is not in the same folder as its sources.
• Semantic UI is updated automatically using npm as per the rules in my package.json.

Here are the steps needed to achieve this:

1. Install Semantic UI. By this I assume that you either used npm or cloned it from git (using npm is highly recommended), either way, you have semantic.json in your project's main folder and a semantic folder with gulpfile.js, src and tasks.

2. Make sure Semantic UI can be built. Navigate to semantic/ and run gulp build. This should create a dist folder in your semantic/ directory. Delete it and also delete Semantic UI's gulpfile.js since you'll no longer need it.

3. Edit semantic.json. You need to edit two lines:

   1. Change "packaged": "dist/", to the path where you'd like to output semantic.css and semantic.js relative to Semantic UI's folder. In our case, it was "packaged": "../../assets/semantic/",
   2. Change "themes": "dist/themes/" in the same way, since the themes/ folder contains fonts and images Semantic UI uses so it needs to be in the same folder as semantic.css. In our case, it was "themes": "../../assets/semantic/dist/themes/".

4. Edit your gulpfile.js so that it uses Semantic UI's build task. Add var semanticBuild = require('./semantic/tasks/build'); (if semantic/ is in the same folder as your gulpfile.js) and then simply register a task that depends on it, for example gulp.task('semantic', semanticBuild);.

5. Optionally, create a clean task. We used del for that.

   gulp.task('clean:semantic', function(cb) {
       del(['assets/semantic'], cb);
   });