saerdn / generator-nikita

The yeoman generator for nikita.kit project boilerplate

generator-nikita

Latest Release:

This is our generator to start a new web project from scratch. It will generate a completely customized version of our nikita-kit project boilerplate for your project. Feel free to re-run the generator to add or remove features.

Project-Setup

• Grunt – Javascript task runner
• Webpack – module bundler
• Babel – compiler for ES6 Javascript
• twigRender or Assemble – static site generator
• EJS - client side templates
• SASS with LibSass – css preprocessing
• PostCSS – css postprocessing
• Jest – JS testing framework
• ESLint – linter for JS files
• stylelint – linter for SCSS files
• Browsersync – synchronised browser testing
• nikita.html – HTML conventions and coding guidelines
• nikita.css – (S)CSS conventions and coding guidelines
• nikita.js – JS conventions and coding guidelines
• and many more optional features:
  • svg images as inlined css background images
  • useful scss mixins and extends
  • jQuery, Select2 and Swiper
  • webfonts
  • pre-commit hook for code linting

Getting Started

Yeoman

Not every new computer comes with a Yeoman pre-installed. He lives in the npm package repository. You only have to ask for him once, then he packs up and moves into your hard drive. Make sure you clean up, he likes new and shiny things.

npm install -g yo

Nikita Yeoman Generator

To install or update generator-nikita, run:

npm install -g generator-nikita

Finally, initiate the generator at desired directory and answer the questions:

yo nikita

Generator main questions

Your project name
Is this project private?

These answers will set the corresponding values in the generated package.json.

 

Which configuration template do you want to use?
* Web-App setup
* Symfony setup
* Wordpress setup
* Spring Boot setup

Here you can choose a config preset for your kind of project. See Templates section below for further information.

 

Customize this template?

Answer Yes to customize the nikita default options. This will ask you several questions which Features, Mixins, Extends and Librarys to add.

 

Do you want to use source+build+dist folders or one custom source folder?

This question appears only when you chose Web-App setup before. Here it is recommended to answer Yes because using source+build+dist folders provides a better separation of concerns. If you answer No you get asked for the custom source folder path later on.

Templates

Web-App

This is the standard template for stand-alone web apps. You can choose if you want to use source+build+dist folders or one custom source folder.

Symfony

The Symfony template sets the source folder to web/static.

To use the nikita build files, just add something like following lines to your base.html.twig file:

<link rel="stylesheet" href="{{ asset('static/generated/styles.css') }}" />
<script src="{{ asset('static/generated/main.js') }}"></script>

Wordpress

The Wordpress template sets the source folder to static/. In addition to nikita generator defaults, jQuery is added.

To use the nikita build files, just enqueue them in your wordpress tamplate like this:

wp_enqueue_script('main.js', rtrim(WP_HOME, '/') . '/static/generated/main.js', array(), '1.0', false);
wp_enqueue_style('styles.css', rtrim(WP_HOME, '/') . '/static/generated/styles.css', array(), '1.0', 'all');

Spring Boot

The Spring Boot template sets the source folder to src/main/resources/static. In addition, the files Application.java and pom.xml are generated. Therefor you were ask for Java groupId, Java version and Spring Boot version.

Contributing

We welcome contributions to generator nikita. See CONTRIBUTING.md for a small guide.

License

generator-nikita is licensed under CC0: Public Domain Dedication, please see NIKITA-LICENSE.md for further information.