[Documentation] Recommended build process messy

[TomS-]

I'm a little confused by the recommended way of getting UIKit in to a project. The recommended way is to use YARN. So the root of the project will have UIKit installed under ./node_modules/uikit/. If we were to customise the theme in which most people will want, we do Yarn Install which adds another node_modules. So we have /node_modules/uikit/node_modules/ this is starting to get really messy.

I feel like more can be done to streamline this. Especially since the path to UIKit to include into a project becomes ./node_modules/uikit/dist/css/uikit.min.css and ./node_modules/uikit/dist/js/uikit.min.js personally I don't think that feels really clean, especially since you wouldn't want node_modules included in a repository so the .gitignore becomes difficult because you want to stop one node_modules but not the other.

I feel like the recommended way should be to clone uikit github and yarn from there. Giving a much nicer folder structure so the path is simply uikit/dist/css/uikit.min.css and we can ignore node_modules from the repository.

[aarongerig]

Simple example with yarn

1. yarn add uikit --> installs UIkit into node_modules/uikit
2. cd node_modules/uikit && yarn install && yarn compile --> installs UIkit's dependencies inside node_modules/uikit and also compiles UIkit. To simplify, add this to your package.json file under scripts and name it install. Next time you run yarn install inside your document root, UIkit will get installed and compiled simultaneously. With version 2 of yarn, this will be much easier, see Yarn's Future - v2 and beyond yarnpkg/yarn#6953
3. Now, don't ever add any of your code inside of node_modules.
4. Add your own code (CSS and JavaScript) somewhere you can easily modify and add it to git. I, for example, put it under /assets, but that's just my preference and you can name it whatever and place it wherever you want.
5. Setup your workflow with webpack or any other module bundler and bundle UIkit's file with your custom code. Now you won't have to include ugly paths like /node_modules/uikit/dist/css/uikit.min.css or /node_modules/uikit/dist/js/uikit.min.js

Note: If you won't bundle UIkit's code with your own custom code, don't install UIkit with yarn or npm. Simply use the CDN version or download it directly from Github.

[TomS-]

@aarongerig Thank you for your reply. Very helpful, I was wondering if you have any example of 4 - 5, I like the idea of using UIKit as a module and extending it from inside my folder structure. I use Gulp so I'm not entirely sure how to include it into my build process. Especially when it comes to JavaScript. I know I can import the less file, but the JavaScript I'm a little loss to. I'm guessing Gulp wouldn't work in this aspect because it's more of a post-processor than a package manager?

If I could run yarn install to compile to /assets as you said, which will also include any variable modifications or hooks that seems really clean.

[aarongerig]

Of course this works with gulp as well and yes, I would recommend to use webpack. Once you have some spare time, have a look at it. ;)

Simple gulp setup

1. yarn add --dev gulp-less gulp-babel babel-core babel-preset-env babel-polyfill
2. Create your gulpfile:

var gulp = require('gulp');
var less = require('gulp-less');
var babel = require('gulp-babel');

gulp.task('styles', function() {  
  return gulp.src('./assets/src/less/main.less')
    .pipe(less({
      paths: ['./node_modules/uikit/src/less']
    }))
    .pipe(gulp.dest('./assets/dist/css/'));
}); 

gulp.task('scripts', function() {
  return gulp.src([
    './node_modules/babel-polyfill/dist/polyfill.js',
    './assets/src/js/main.js'
  ])
  .pipe(babel({ presets: ['es2015'] }))
  .pipe(gulp.dest('./assets/dist/js'))
});

// maybe some other tasks ...

3. Create you custom CSS and JavaScript files:

assets/src/less/main.less

// Core
@import 'uikit.less';

// Customize your theme here ...

assets/src/js/main.js

import UIkit from 'uikit';
import Icons from 'uikit/dist/js/uikit-icons';

// loads the Icon plugin
UIkit.use(Icons);

// components can be called from the imported UIkit reference
UIkit.notification('Hello world.');

Note: This is completely untested and may contain errors.

I'm closing this, since this has nothing to do with UIkit anymore.

[mrmoodoo]

This may sound like a dumb question, but how do you see run it after yarn watch and see the project in localhost?

I have ran all the commands from the uikit site: https://getuikit.com/docs/installation but after yarn watch then what?

yarn add uikit

yarn

yarn compile

yarn watch